Estaba tratando de crear una calculadora de demostración simple y obtuve el resultado como NaN. Creo que es algo con el JS llamando a los valores de entrada. Consulte el siguiente código.
var num1 = document.getElementsByName(firstNoInput).value; var num2 = document.getElementsByName(secondNoInput).value; var ans; function addition() { ans = num1 + num2; document.getElementById("screen").innerHTML = ans; } function subtraction() { ans = num1 - num2; document.getElementById("screen").innerHTML = ans; } function multiplication() { ans = num1 * num2; document.getElementById("screen").innerHTML = ans; } function division() { ans = num1 / num2; document.getElementById("screen").innerHTML = ans; } <!DOCTYPE html> <html> <head> <title>Calculator</title> </head> <body> <div> <header id="screen"></header> <table> <tbody> <tr> <td>First Number:</td> <td name="firstNoInput"><input type="text" /></td> </tr> <tr> <td>Second Number:</td> <td name="secondNoInput"><input type="text" /></td> </tr> <tr> <td><button type="submit" onclick="addition()">+</button></td> <td><button type="submit" onclick="subtraction()">-</button></td> </tr> <tr> <td><button type="submit" onclick="multiplication()">*</button></td> <td><button type="submit" onclick="division()">/</button></td> </tr> </tbody> </table> </div> </body> </html>Incluso usé el siguiente código (convertir valores en cadenas), pero no funcionó.
var num1 = parseInt(document.getElementsByName(firstNoInput).value); var num2 = parseInt(document.getElementsByName(secondNoInput).value);¿Alguien puede ayudar?
var num1 = document.getElementsByName(firstNoInput).value; var num2 = document.getElementsByName(secondNoInput).value;Está Mal. Debe pasar los parámetros como cadenas. Sin embargo, ignore esta parte, ya que las dos variables que define solo tienen sentido si sus campos de entrada ya tienen valores cuando se carga la página. Dado que no tiene estos valores, necesitará un oyente clave que obtenga los valores cada vez que el usuario escriba.
Además, como se describe en los comentarios, getElementsByName() devuelve una lista de nodos y no un elemento.
let num1; let num2; document.getElementsByName('firstNoInput')[0].addEventListener('keyup', (e) => { num1 = e.target.value; }); document.getElementsByName('secondNoInput')[0].addEventListener('keyup', (e) => { num2 = e.target.value; }); function addition() { ans = Number(num1) + Number(num2); document.getElementById("screen").innerHTML = ans; } function subtraction() { ans = Number(num1) - Number(num2); document.getElementById("screen").innerHTML = ans; } function multiplication() { ans = Number(num1) * Number(num2); document.getElementById("screen").innerHTML = ans; } function division() { ans = Number(num1) / Number(num2); document.getElementById("screen").innerHTML = ans; } <header id="screen"></header> <table> <tbody> <tr> <td>First Number:</td> <td name="firstNoInput"><input type="text" /></td> </tr> <tr> <td>Second Number:</td> <td name="secondNoInput"><input type="text" /></td> </tr> <tr> <td><button type="submit" onclick="addition()">+</button></td> <td><button type="submit" onclick="subtraction()">-</button></td> </tr> <tr> <td><button type="submit" onclick="multiplication()">*</button></td> <td><button type="submit" onclick="division()">/</button></td> </tr> </tbody> </table>Su var num1 y num2 se configuran solo cuando inicia el script. Dado que parece que le gustaría usarlas como variables para sus cálculos, podemos usar una función getter.
Y puede usar una función de establecimiento en la salida.
// var num1 = document.getElementsByName(firstNoInput).value; // not the input! this is the td element. // var num2 = document.getElementsByName(secondNoInput).value; var num1 = { get value() { return (document.getElementById("number1").value * 1); // note multiply by 1 to make typeof number. } }; var num2 = { get value() { return (document.getElementById("number2").value * 1); // note multiply by 1 to make typeof number. } }; var ans = { set value(z) { document.getElementById("answer").innerHTML = z} }; function addition() { ans.value = num1.value + num2.value; // note num1.value and num2.value must be typeof number. } function subtraction() { ans.value = num1.value - num2.value; } function multiplication() { ans.value = num1.value * num2.value; } function division() { ans.value = num1.value / num2.value; } <!DOCTYPE html> <html> <head> <title>Calculator</title> </head> <body> <div> <header id="screen"></header> <table> <tbody> <tr> <td>First Number:</td> <td name="firstNoInput"><input id="number1" type="text" value=""/></td> </tr> <tr> <td>Second Number:</td> <td name="secondNoInput"><input id="number2" type="text" value="" /></td> </tr> <tr> <td>Answer</td> <td id="answer"></td> </tr> <tr> <td><button type="submit" onclick="addition()">+</button></td> <td><button type="submit" onclick="subtraction()">-</button></td> </tr> <tr> <td><button type="submit" onclick="multiplication()">*</button></td> <td><button type="submit" onclick="division()">/</button></td> </tr> </tbody> </table> </div> </body>