javascript - 在 OnChange 事件 Javascript 中需要帮助

Question

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

谢谢。

Answer 1

Daisy，像这样的东西应该有用。你可以view a live demo JSBin 上的这段代码。

<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 [类型='文本']。其中一个成绩字段如下所示:

<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 除外)。