javascript - 尝试制作一个自动添加数字的表单，而不像事件监听器那样提交

Question

请帮助我到目前为止已经做到了这一点。我希望所有 6 个字段都能正常工作，我该怎么做？这基本上是为了计算考试成绩，以便快速获得帮助。

function myFunction() {
  var a = parseFloat(document.getElementById("txt1").value);
  var b = parseFloat(document.getElementById("txt2").value);
  var c = parseFloat(document.getElementById("txt3").value);
  var d = parseFloat(document.getElementById("txt3").value);
  var e = parseFloat(document.getElementById("txt4").value);
  var f = parseFloat(document.getElementById("txt5").value);
  var g = parseFloat(document.getElementById("txt6").value);
  var g = a + b + c + d + e + f + g;
  // If x = NaN empty variable x
  if (!g) {
    x = '';
  }
  document.getElementById("demo").innerHTML = x;
}
window.onload = function() {
  var inputs = document.getElementsByClassName('calc');
  for (var i = 0; i < inputs.length; i++) {
    // Listen for input > Call MyFunction
    inputs[i].addEventListener('input', myFunction, false);
  }
};

Enter first number:
<input type="text" class="calc" id="txt1" name="text1">Enter second number:
<input type="text" class="calc" id="txt2" name="text2">Enter third numve
<input type="text" class="calc" id="txt3" name="text3">Enter fourth number:
<input type="text" class="calc" id="txt4" name="text4">Enter fifth number:
<input type="text" class="calc" id="txt5" name="text5">Enter sixth number:
<input type="text" class="calc" id="txt6" name="text6">
<p id="demo"></p>

Answer 1

由于您有更多的输入并且扩展了我之前的答案可以通过使用 getElementsByClassName() 和 for 循环来减少源代码输入。

不要忘记使用 /> 关闭您的输入。我还删除了作为 class 名称的 ID，for 循环将负责定位这些元素。

function myFunction() {
var a=0;
var Calc=document.getElementsByClassName('calc');
for(var i=0; i<Calc.length; i++){
	if(parseFloat(Calc[i].value)){
	a=a+parseFloat(Calc[i].value);
	}
}
// If a = NaN empty variable a
if(isNaN(parseFloat(a))){x='';}
// Changed from .innerHTML to .value
document.getElementById("Result").value = a;
}
window.onload=function(){
var inputs=document.getElementsByClassName('calc');
  for(var i=0; i<inputs.length; i++){
    // Listen for input > Call MyFunction
    inputs[i].addEventListener('input',myFunction,false);
  }
};

Enter first number: <input type="text" class="calc"/>
Enter second number:<input type="text" class="calc">
Enter third numve <input type="text" class="calc"/>
Enter fourth number:<input type="text" class="calc"/>
Enter fifth number: <input type="text" class="calc"/>
Enter sixth number:<input type="text" class="calc"/>
<!-- Div Removed and input added -->
<input type="text" id="Result"/>

Request Edit: Change div element to input for results

如果您对上述源代码有任何疑问，请在下方留言，我会尽快回复您。

希望对您有所帮助。编码愉快!