Question

我有五个文本字段，分别是mark1，mark2，mark3，mark4和total。我有一个问题是使总数自动显示在文本字段中。我对计算部分没有任何问题。但我无法在文本字段中自动显示总数。一旦用户完成所有四个标记后，如何使总数自动显示在文本字段中？我知道它与使用Javascript的OnChange事件有关。但我没有得到正确的代码。有没有人可以帮我这个？真的需要你的建议。

谢谢。

Answer 1

黛西，这样的事应该有效。您可以在JSBin上view a live demo使用此代码。

<input type="text" name="mark1" id="mark1" value="" />
<input type="text" name="mark2" id="mark2" value="" />
<input type="text" name="mark3" id="mark3" value="" />
<input type="text" name="mark4" id="mark4" value="" />
<input type="text" name="total" id="total" value="" />

<!-- Script block must come AFTER the input elements -->

<script type="text/javascript">
  var m1    = document.getElementById('mark1'),
      m2    = document.getElementById('mark2'),
      m3    = document.getElementById('mark3'),
      m4    = document.getElementById('mark4'),
      total = document.getElementById('total');

  function calculate_total(){
    // Use your real calculation here
    total.value = Number(m1.value) + Number(m2.value) + Number(m3.value) + Number(m4.value);
  }

  if( window.addEventListener ) {
    m1.addEventListener('change', calculate_total, false);
    m2.addEventListener('change', calculate_total, false);
    m3.addEventListener('change', calculate_total, false);
    m4.addEventListener('change', calculate_total, false);
  } else if(window.attachEvent){
    m1.attachEvent('onchange', calculate_total);
    m2.attachEvent('onchange', calculate_total);
    m3.attachEvent('onchange', calculate_total);
    m4.attachEvent('onchange', calculate_total);
  }
</script>

更新：由于您要输入字母等级（A，B，C，F等），我建议使用select控件而不是input[type='text']。其中一个等级字段如下所示：

<select name="mark1" id="mark1">
    <option value="">Select Grade</option>
    <option value="100">A</option>
    <option value="90">B</option>
    <option value="80">C</option>
    <option value="70">D</option>
    <option value="50">F</option>
</select>

您将数字值放在value=部分，但您可以显示更友好的A，B，C等。

在.value的任何地方都替换为.selectedValue（当然，total.value除外）。

Answer 2

黛西，Doug provided a great answer，但在看完你的评论后，我想我会做出一点改变。请注意grades数组值以及Doug函数的小变化：

// Add grades and corresponding value below
var grades = {A:100,B:70};

function calculate_total(){
  // Use your real calculation here
  total.value = grades[m1.value] + grades[m2.value] + grades[m3.value] + grades[m4.value];
}

在OnChange event Javascript中需要帮助

2 个答案: