我有五个文本字段,分别是mark1,mark2,mark3,mark4和total。我有一个问题是使总数自动显示在文本字段中。我对计算部分没有任何问题。但我无法在文本字段中自动显示总数。一旦用户完成所有四个标记后,如何使总数自动显示在文本字段中?我知道它与使用Javascript的OnChange事件有关。但我没有得到正确的代码。有没有人可以帮我这个?真的需要你的建议。
谢谢。
答案 0 :(得分:4)
<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
除外)。
答案 1 :(得分: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];
}