在OnChange event Javascript中需要帮助 [英] Need help in OnChange event Javascript

问题描述

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

I have five text fields which are mark1, mark2, mark3, mark4 and total. I have a problem to make the total automatically display in the text field. I have no problem with the calculation part. But I can't make the total to be display automatically in the text field. How can I make the total to be automatically display in the textfield once the user have finish entered all the four marks? I know it have to do with the OnChange event using Javascript. But I did not get the right codes. Does anyone can help me with this? Really need your advise.

谢谢你。

推荐答案

Daisy，这样的事情应该有效。您可以在JSBin上查看此代码的现场演示。

Daisy, something like this should work. You can view a live demo of this code on 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 控件而不是输入[type ='text'] 。其中一个成绩字段如下所示：

UPDATE: Since you want a letter grade entered (A, B, C, F, etc) I would recommend a select control instead of an input[type='text']. One of the grade fields would look like this:

<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>

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

You put the number value in the value= portion, but you can display the friendlier A, B, C, etc.

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

And anywhere there was .value replace with .selectedValue (Except total.value of course).

这篇关于在OnChange event Javascript中需要帮助的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！