javascript - 第三次是一个魅力......也许

我仍在尝试从单元格收集信息，使用该信息执行函数，然后将结果返回到不同的单元格。我知道这是可能的，但我正在努力解决这个问题。我在这里收到的许多提示引导我找到了以我理解的方式表达的大量信息。我希望这种事能再次发生——这让我发疯。以下代码已在 Liveweave 上测试，没有显示错误。但它仍然不起作用。有什么想法吗？

JAVACSCRIPT

calculate = function(){
var total1= (document.form[0].mark1.value) +(document.form[0].mark2.value) + (document.form[0].mark3.value);
  document.form[0].total.value = total1;
  return total1;
};

HTML

<form>
  <table>




    <tr>
      <th>Name</th>
      <th>Date</th>
      <th>Date</th>
      <th>Date</th>
      <th>Date</th>
      <th>Date</th>
      <th>Final</th>
    </tr>
    <tr>
      <td>Name1</td>
      <td class="mark1">34</td>
      <td class="mark2">77</td>
      <td class="mark3">99</td>
      <td>0</td>
      <td>0</td>
      <td class="total" placeholder="0">0</td>
    </tr>
  </table><br/>
<input type="button" value="Calculate" onclick="calculate"/>
<!-- End your code here -->
  </form>

任何帮助将不胜感激。干杯，彼得

最佳答案

唯一具有 value 的 DOM 元素属性是表单字段( <input> 、 <textarea> 、 <select> )。您的示例中没有任何内容，因此您不能使用 value来获取它们。

同样，您无法使用 container.theClass 访问具有类名的元素。，所以document.form[0].mark1不会给你<td class="mark1">...</td>表单中表格中的单元格。

要访问元素，主要工具是:

querySelector - 查找容器中与 CSS 选择器匹配的第一个元素
querySelectorAll - 查找容器中与 CSS 选择器匹配的所有元素
document.getElementById - 查找具有给定 id 的一个元素值

要获取非表单单元格内的文本(非值)，您可以使用 innerHTML (它为您提供 HTML 标记，但在您的情况下，这只是数字的文本)。然后我们解析该文本以获取数字。

在您的示例中，我们可以使用 document.querySelector(".mark1") 找到我们关心的元素和类似的。

function calculate(){
    var mark1 = document.querySelector(".mark1");
    var mark2 = document.querySelector(".mark2");
    var mark3 = document.querySelector(".mark3");
    var total = document.querySelector(".total");
    var sum   = parseInt(mark1.innerHTML, 10) +
                parseInt(mark2.innerHTML, 10) +
                parseInt(mark3.innerHTML, 10);
    total.innerHTML = String(sum);
}

请注意，这假设您只想使用第一个(唯一的)单元格。如果您有多个表单/表格并希望在每个表单/表格中工作，您可能会希望采取稍微不同的方式，也许可以通过将表单元素传递到函数中来实现:

function calculate(form){
    var mark1 = form.querySelector(".mark1");
    var mark2 = form.querySelector(".mark2");
    var mark3 = form.querySelector(".mark3");
    var total = form.querySelector(".total");
    var sum   = parseInt(mark1.innerHTML, 10) +
                parseInt(mark2.innerHTML, 10) +
                parseInt(mark3.innerHTML, 10);
    total.innerHTML = String(sum);
}

注意我如何使用form.querySelector而不是document.querySelector 。这会找到第一个匹配元素，但仅在表单内查找。因此，如果我们有三种形式，我们可以这样做:

var forms = document.querySelectorAll("form"); // Note the "All"
var index;
for (index = 0; index < forms.length; ++index) {
    calculate(forms[index]);
}

Live copy with three forms (来源位于答案末尾)

这就是使用类而不是 id 的原因s。 id s 对于页面上唯一的内容很有用，但通常更喜欢使用类来提高灵 active 。

<小时/>

旁白:请注意我如何更改函数的创建方式。以上是声明函数的正常方法。您正在做的是另一种方法，它使用表达式创建函数并将其分配给变量。但您没有声明该变量，因此您的代码成为 The Horror of Implicit Globals 的牺牲品。如果您更喜欢使用表达式，请声明变量:

var calculate = function(){
    var mark1 = document.querySelector(".mark1");
    var mark2 = document.querySelector(".mark2");
    var mark3 = document.querySelector(".mark3");
    var total = document.querySelector(".total");
    var sum   = parseInt(mark1.innerHTML, 10) +
                 parseInt(mark2.innerHTML, 10) +
                 parseInt(mark3.innerHTML, 10);
    total.innerHTML = String(sum);
};

<小时/>

三种表单示例的来源:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Example</title>
</head>
<body>
  <p>First form</p>
  <form>
    <table>
      <tr>
        <th>Name</th>
        <th>Date</th>
        <th>Date</th>
        <th>Date</th>
        <th>Date</th>
        <th>Date</th>
        <th>Final</th>
      </tr>
      <tr>
        <td>Name1</td>
        <td class="mark1">34</td>
        <td class="mark2">77</td>
        <td class="mark3">99</td>
        <td>0</td>
        <td>0</td>
        <td class="total">0</td>
      </tr>
    </table>
  </form>  
  <p>Second form</p>
  <form>
    <table>
      <tr>
        <th>Name</th>
        <th>Date</th>
        <th>Date</th>
        <th>Date</th>
        <th>Date</th>
        <th>Date</th>
        <th>Final</th>
      </tr>
      <tr>
        <td>Name1</td>
        <td class="mark1">4</td>
        <td class="mark2">7</td>
        <td class="mark3">18</td>
        <td>0</td>
        <td>0</td>
        <td class="total">0</td>
      </tr>
    </table>
  </form>  
  <p>Third form</p>
  <form>
    <table>
      <tr>
        <th>Name</th>
        <th>Date</th>
        <th>Date</th>
        <th>Date</th>
        <th>Date</th>
        <th>Date</th>
        <th>Final</th>
      </tr>
      <tr>
        <td>Name1</td>
        <td class="mark1">1</td>
        <td class="mark2">2</td>
        <td class="mark3">3</td>
        <td>0</td>
        <td>0</td>
        <td class="total">0</td>
      </tr>
    </table>
  </form>  
  <div><input type="button" value="Calculate" onclick="calculate"></div>
<script>
  function calculate(form){
    var mark1 = form.querySelector(".mark1");
    var mark2 = form.querySelector(".mark2");
    var mark3 = form.querySelector(".mark3");
    var total = form.querySelector(".total");
    var sum   = parseInt(mark1.innerHTML, 10) +
                parseInt(mark2.innerHTML, 10) +
                parseInt(mark3.innerHTML, 10);
    total.innerHTML = String(sum);
  }

  var forms = document.querySelectorAll("form"); // Note the "All"
  var index;
  for (index = 0; index < forms.length; ++index) {
    calculate(forms[index]);
  }
</script>
</body>
</html>

关于javascript - 第三次是一个魅力......也许，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24841600/

javascript - 第三次是一个魅力......也许

上一篇：javascript - 使用 <span> 彩虹滚动文本

下一篇：javascript - 制作索引文件，如果 session 不存在，则通过 AJAX 加载登录屏幕