JavaScript：从输入值获取'NaN'

Question

这是第一次尝试JavaScript，现在我只想确保站点能够识别我输入的值，并让控制台将其打印回来。由于某些原因，我一直得到NaN作为结果，我不知道为什么。

HTML:

<div class="container">
<form class="question-1">
<label class="fnum">Enter your first number:</label>
<input type="number" id="fnum" name="fnum">
</form>
<form class="question-2">
<label class="snum">Enter your second number:</label>
<input type="number" id="snum" name="snum">
</form>

Javascript:

const buttonAdd = document.querySelector(".plus");
buttonAdd.addEventListener("click", (e) =>{
var num1 = parseFloat(document.querySelector(".fnum").value);
var num2 = parseFloat(document.querySelector(".snum").value);
console.log(num1);
console.log(num2);
});

html包括:<button class="plus">+</button>

Answer 1

因为document.querySelector(".fnum")只返回<label class="fnum">Enter your first number:</label>元素，不返回<input type="number" id="fnum" name="fnum">元素，所以没有.value属性，因此，document.querySelector(".fnum").value返回null。

要获取<input type="number" id="fnum" name="fnum">的值，可以使用document.getElementById("fnum").value来获取。

对于<input type="number" id="snum" name="snum">元素，问题也是一样的。

Answer 2

const buttonAdd = document.querySelector(".plus");
buttonAdd.addEventListener("click", (e) =>{
var num1 = parseFloat(document.querySelector("#fnum").value);
var num2 = parseFloat(document.querySelector("#snum").value);
console.log(num1);
console.log(num2);
});

<div class="container">
<form class="question-1">
<label class="fnum">Enter your first number:</label>
<input type="number" id="fnum" name="fnum">
</form>
<form class="question-2">
<label class="snum">Enter your second number:</label>
<input type="number" id="snum" name="snum">
</form>
<button class="plus">+</button>
</div>

您的查询选择器错误。

document.querySelector(".fnum")

类名为fnum。

document.querySelector("#fnum")

应该和上面的id一样。