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")只是return<label class="fnum">Enter your first number:</label>元素，而不是<input type="number" id="fnum" name="fnum">元素，所以它没有.value属性，因此，document.querySelector(".fnum").value return 为空。

要获取 <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")

这是为了 class 名称是 fnum。

document.querySelector("#fnum")

应该像上面的id。

JavaScript: 从一个输入值得到 'NaN'

JavaScript: getting 'NaN' from an input value

javascript

input

nan