¿Puede alguien ayudarme con esto? Soy nuevo con javascript.
let x1 = parseInt(document.getElementById("x1").value) let x2 = parseInt(document.getElementById("x2").value) word = function(){ let c = x1+x2 document.getElementById("res").innerHTML=c } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Calculator</title> <link rel="stylesheet" href="../css/style.css"> </head> <body> <h1 class="text-4xl">Calculator</h1><br> <div> <form action="GET"> <label for="x1">Input 1</label><br> <input type="text" id="x1" placeholder="1-10.." class="border-2 border-black"><br> <label for="x2">Input 2</label><br> <input type="text" id="x2" placeholder="1-10.." class="border-2 border-black"><br> </form> <button type="button" id="btn" class="rounded-lg bg-gray-500 p-1 px-2 my-2 text-white hover:bg-gray-600" onclick="word()">Test</button> <p id="res"></p> </div> <script src="../js/config.js"></script> </body> </html>Entonces quiero sumar x1 con x2, pero la salida es NaN.
Aquí está el código en html parece una página html
Necesita obtener el valor dentro de la función de clic.
let x1 = document.getElementById("x1") let x2 = document.getElementById("x2") word = function(){ let c = parseInt(x1.value)+parseInt(x2.value) document.getElementById("res").innerHTML=c } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Calculator</title> <link rel="stylesheet" href="../css/style.css"> </head> <body> <h1 class="text-4xl">Calculator</h1><br> <div> <form action="GET"> <label for="x1">Input 1</label><br> <input type="text" id="x1" placeholder="1-10.." class="border-2 border-black"><br> <label for="x2">Input 2</label><br> <input type="text" id="x2" placeholder="1-10.." class="border-2 border-black"><br> </form> <button type="button" id="btn" class="rounded-lg bg-gray-500 p-1 px-2 my-2 text-white hover:bg-gray-600" onclick="word()">Test</button> <p id="res"></p> </div> <script src="../js/config.js"></script> </body> </html>Simplemente poniendo el value dentro de su función.
let x1 = document.getElementById("x1") let x2 = document.getElementById("x2") word = function(){ console.log(x1.value); let c = parseInt(x1.value)+ parseInt(x2.value) document.getElementById("res").innerHTML= +c } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Calculator</title> <link rel="stylesheet" href="../css/style.css"> </head> <body> <h1 class="text-4xl">Calculator</h1><br> <div> <form action="GET"> <label for="x1">Input 1</label><br> <input type="text" id="x1" placeholder="1-10.." class="border-2 border-black"><br> <label for="x2">Input 2</label><br> <input type="text" id="x2" placeholder="1-10.." class="border-2 border-black"><br> </form> <button type="button" id="btn" class="rounded-lg bg-gray-500 p-1 px-2 my-2 text-white hover:bg-gray-600" onclick="word()">Test</button> <p id="res"></p> </div> <script src="../js/config.js"></script> </body> </html>por lo general, NaN ocurrirá cuando intente hacer operaciones matemáticas número con cadena o cadena con número. por favor, depure y verifique si su código está haciendo eso.