Solo estaba tratando de escribir un programa javascript simple que demostrará tomar la entrada del usuario del campo de texto, y al hacer clic en el botón se mostrará el resultado de la suma de esos números en un párrafo. Pero desafortunadamente el siguiente código no funciona. Al hacer clic en el botón, se muestra NAN en el párrafo.
<input type="text" name="" id="num1"><br><br> <input type="text" name="" id="num2"><br> <br> <button id="add">Answer</button> <br> <p id="para"></p> <script> let num1=parseInt(document.getElementById("num1")); let num2=parseInt(document.getElementById("num2")); let add=document.getElementById("add"); add.addEventListener("click",function(){ document.getElementById("para").innerHTML=num1+num2;});
</script>Obtiene el elementById, pero no obtiene ese valor de ID.
Agregue .value al final de su getElementById
function addTogether() { var val1 = document.getElementById('val1').value; var val2 = document.getElementById('val2').value; var sum = parseInt(val1) + parseInt(val2); console.log(sum); } <input type="text" id="val1" /> <input type="text" id="val2" /> <input type="button" value="Add Them Together" onclick="addTogether();" />necesita obtener el valor de num1 y num2 y necesita obtener el valor después de hacer clic, por lo que dentro de su función
<input type="text" name="" id="num1"><br><br> <input type="text" name="" id="num2"><br> <br> <button id="add">Answer</button> <br> <p id="para"></p> <script> let add=document.getElementById("add"); add.addEventListener("click",function(){ let num1=parseInt(document.getElementById("num1").value); let num2=parseInt(document.getElementById("num2").value); document.getElementById("para").innerHTML=num1+num2; }); </script>Simplemente puedes hacerlo así
<input type="text" id="num1"><br><br> <input type="text" id="num2"><br><br> <button id="add">Answer</button><br> <p id="para"></p> <script> let add=document.getElementById("add"); add.addEventListener("click",function(){ var num1 = document.getElementById('num1').value; var num2 = document.getElementById('num2').value; var res = parseInt(num1) + parseInt(num2); document.getElementById("para").innerHTML = res ; }); </script>aquí está la demostración del código de trabajo
let add=document.getElementById("add"); add.addEventListener("click",function(){ var num1 = document.getElementById('num1').value; var num2 = document.getElementById('num2').value; var res = parseInt(num1) + parseInt(num2); document.getElementById("para").innerHTML = res ; }); <input type="text" id="num1"><br><br> <input type="text" id="num2"><br><br> <button id="add">Answer</button> <br> <p id="para"></p>