Question

我正在尝试获取三个分数中的每一个的价值并将其添加并显示在＆＃34; Total：＆＃34;中。我的问题是，我无法弄清楚如何制作它，以便每当其中一个得分值发生变化时，相应的总变化就会随之改变。

我是否能以某种方式调用＆＃34; onchange＆＃34;在哪里使这项工作？谢谢。

<!DOCTYPE html>
<html>
  <head>
    <script src="getTotal.js"  type="text/javascript"></script>
  </head>
  <body>
    <header>
      <tbody>
        <tr>
          <td>
            Total: 
            <output id="total" class="totalScore"></output>
          </td>
        </tr>
      </tbody>
    </header>
  <table>
    <tbody>
      <td>Score 1</td>
      <td><input type="number" id="score1"/></td>

      <td>Score 2</td>
      <td><input type="number" id="score2" /></td>

      <td>Score 3</td>
      <td><input type="number" id="score3" /></td>
    </tbody>
  </table>

<script type="text/javascript">assign();</script>

  </body>
</html>

这是我的JavaScript类getTotal.js

function total() {
    var score1 = document.getElementById("score1");
    var score2 = document.getElementById("score2");
    var score3 = document.getElementById("score3");

    return score1 + score2 + score3;
}

function assign() {
    var totalScore = document.getElementById("total");
    totalScore = total;
}

Answer 1

您的代码'按原样'将无效。正如我在评论中提到的，您需要查看parseFloat()（或parseInt()，具体取决于您允许的值），以及DOM对象的value属性。最后，onchange或onkeyup事件可用于用户互动。

结合所有这些将为您提供以下工作样本：

var score1Field = document.getElementById('score1'),
    score2Field = document.getElementById('score2'),
    score3Field = document.getElementById('score3');

function sumit()
{
    var score1 = parseFloat( score1Field.value ),
        score2 = parseFloat( score2Field.value ),
        score3 = parseFloat( score3Field.value );

    if( isNaN( score1 ) ) { score1 = 0; }
    if( isNaN( score2 ) ) { score2 = 0; }
    if( isNaN( score3 ) ) { score3 = 0; }

    total = score1 + score2 + score3;

    document.getElementById('total').innerHTML = total;
}

// Bind our events:
score1Field.onkeyup = sumit;
score2Field.onkeyup = sumit;
score3Field.onkeyup = sumit;

// Call it when the page loads to handle default values:
sumit();

jsFiddle Demo

Answer 2

是的，使用onchange事件在值更改时重新计算（在您远离输入后重新计算），或者如果您希望在键入时重新计算，请使用keydown。

Answer 3

是的，你可以使用onchange并在其中包装你的total（）和assign（）函数。有关onchange用法的信息，请参阅此链接：http://www.w3schools.com/jsref/event_onchange.asp

总结JavaScript

3 个答案: