Es la primera vez que pruebo JavaScript, y por ahora solo quiero asegurarme de que el sitio reconozca el valor que estoy ingresando haciendo que la consola me lo imprima. Por alguna razón, sigo obteniendo NaN como resultado y no puedo entender por qué.
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 incluye: <button class="plus">+</button>
Es porque document.querySelector(".fnum") simplemente devuelve el elemento <label class="fnum">Enter your first number:</label> , no el <input type="number" id="fnum" name="fnum"> elemento, por lo que no tiene el atributo .value , por lo tanto, document.querySelector(".fnum").value devuelve nulo.
Para obtener el valor de <input type="number" id="fnum" name="fnum"> , puede usar document.getElementById("fnum").value para hacerlo.
Para el elemento <input type="number" id="snum" name="snum"> , el problema es el mismo.
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>Su selector de consulta es incorrecto.
document.querySelector(".fnum")Esto es para qué nombre de clase es fnum.
document.querySelector("#fnum")Debería ser como el anterior para id.