JavaScript: getting 'NaN' from an input value

June 4, 2022

First time trying JavaScript, and for now I just want to make sure the site recognises the value that I’m inputting by having the console print it back at me. For some reason, I keep getting NaN as the result, and I can’t figure out why.

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 includes: <button class="plus">+</button>

>Solution :

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>

Your query selector is wrong.