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>
It is because document.querySelector(".fnum") just return the <label class="fnum">Enter your first number:</label> element, not the <input type="number" id="fnum" name="fnum"> element, so it does not have .value attribute,
therefore, document.querySelector(".fnum").value return null.
To get the value of <input type="number" id="fnum" name="fnum">, you can use document.getElementById("fnum").value to do so.
For the <input type="number" id="snum" name="snum"> element, the problem is the same.
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.
document.querySelector(".fnum")
This is for what class name is fnum.
document.querySelector("#fnum")
Should be like the above for id.