javascript - 如何获取多个文本框的值并将它们存储在变量中

Question

我正在尝试创建一个页面来计算您的所有工作时间。但是，我无法让它输出任何内容。我尝试使用 querySelectorAll 和 getElementsByTagName (通过将类标记更改为文本框中的名称)。

但是当我执行时，我得到的是“未定义”而不是数字。

有人可以解释一下我做错了什么吗？

function calcHours() {
      let hoursWorked = parseInt(document.querySelectorAll(".txtBox1").value);
      const hoursWorkedText = "Hours worked: "

      if (Number.isNaN(hoursWorked)) {
        //code to throw error.
		errorCalc("value is not a number");
      }
      else {
        //code to run normally.
		document.getElementById('hoursTotal').innerHTML = hoursWorked;
		document.getElementById('hrWorkTxt').innerHTML = hoursWorkedText;
      }
    }
	
	function errorCalc(errorTxt) {
		alert("You done goofed, " + errorTxt + " error");
	}

<input type="textbox" class="txtBox1">
<input type="textbox" class="txtBox1">
<input type="textbox" class="txtBox1">
<input type="textbox" class="txtBox1">
<input type="textbox" class="txtBox1">
<input type="textbox" class="txtBox1">
<input type="textbox" class="txtBox1">
<p id="hrWorkTxt">
<p id="hoursTotal">
<input type="button" value="Calculate" onclick="calcHours()">

Answer 1

几个初始注释:

1. 没有用于输入的类型textbox。您可能指的是文本。既然你想计算数字，我认为你应该使用 number 类型。这样你就可以跳过检查输入是否为 NAN 等...

2. 由于您处理多个输入，为了获取所有值，您应该首先迭代所有值，然后获取每个值。

无论如何，我认为这就是你想要做的:

function calcHours() {
  let hoursWorked = document.querySelectorAll(".txtBox1");
  let hoursWorkedTotal =0;
  for (let i = 0; i < hoursWorked.length; i+=1) {
    hoursWorkedTotal += parseInt(hoursWorked[i].value);
  }
  document.getElementById('hoursTotal').innerHTML = hoursWorkedTotal;
}

<input type="number" class="txtBox1" value="0" />
<input type="number" class="txtBox1" value="0" />
<input type="number" class="txtBox1" value="0" />
<input type="number" class="txtBox1" value="0" />
<input type="number" class="txtBox1" value="0" />
<input type="number" class="txtBox1" value="0" />
<input type="number" class="txtBox1" value="0" />
<button type="button" onclick="calcHours()">Calculate</button>
<p id="hoursTotal"></p>