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返回空值。

获取<input type="number" id="fnum" name="fnum">的值, 你可以使用 document.getElementById("fnum").value这样做。

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