Question

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

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

有人可以解释我在做什么错吗？

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

document.querySelectorAll(".txtBox1")指令返回一个array个元素，因此无法以您尝试的方式访问.value属性。

您应该以这种方式迭代返回array的元素：

var elements = document.querySelectorAll(".txtBox1");
for (var i = 0; i < elements.length; i++) {
  // do something with elements[i]
}

Answer 2

请尝试使用p，而不是使用.innerHTML访问.value元素。

Answer 3

document.querySelectorAll(".txtBox1")返回一个对象，因此您必须从中获取数据。

我认为以下代码将为您服务。

function calcHours() {
      let hoursWorked = document.querySelectorAll(".txtBox1");
	  let hoursWorkedTotal =0;
	  for (var i=0; i<hoursWorked.length; i++){
	  //console.log(hoursWorked[i].value);
	   hoursWorkedTotal += parseInt(hoursWorked[i].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 = hoursWorkedTotal;
        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 4

加上首字母注释：

输入没有textbox类型。您可能是说text。由于您要计算数字，我认为您应该使用类型number。这样，您可以跳过检查输入是否为NAN等...
由于您要处理多个输入，因此要获取所有值，应首先迭代所有值，然后获取每个值。

无论如何，我认为这是您想要做的事情：

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>

如何获取多个文本框的值并将其存储在变量中

4 个答案: