Las variables individuales se están definiendo y puedo alertarlas, es cuando quiero dividir una por la otra que, no solo no me da respuesta, ¡ni siquiera alerta una casilla!
Tengo la identificación del elemento con este código HTML:
<p class="margin"><b>Got </b> </p><input type="number" class="margin" id="iGotThis"> <p class="margin"><b> out of </b></p> <input type="number" class="margin" id="outOfThis">y mételo en una variable con js y este código:
let iGotThis = document.getElementById("iGotThis").value; let outOfThis = document.getElementById("outOfThis").value; let perMade = iGotThis / outOfThis;y estoy tratando de alertar el resultado con una función de alerta:
document.getElementById("submit").click(); } }); function perFunction() { alert(perMade); }; // This entire portion has no use for the variables var input = document.getElementById("outOfThis"); var perMade = 0; input.addEventListener("keyup", function(event) { let iGotThis = document.getElementById("iGotThis").value; let outOfThis = document.getElementById("outOfThis").value; let perMade = iGotThis / outOfThis; if (event.keyCode === 13) { event.preventDefault(); document.getElementById("submit").click(); } }); // This is where the useless section ends function perFunction() { alert(perMade); }; .margin { margin-left: 80px; } <!DOCTYPE html> <html> <body> <br> <br> <p class="margin"><b>Got </b></p><input type="number" class="margin" id="iGotThis"> <p class="margin"><b> out of </b></p><input type="number" class="margin" id="outOfThis"> <br> <br> <input type="submit" id="submit" class="margin" onclick="perFunction()"> </body> </html> Nuevamente, las variables iGotThis y outOfThis funcionan, pero es cuando trato de recuperar perMade que simplemente se rompe por completo.
El problema es que la variable con la que está trabajando no está dentro del alcance. Como se declara desde otra función, ese es el alcance en el que permanece. Para resolver esto, puede elevar el alcance declarando la variable perMade al comienzo de su código.
// This entire portion has no use for the variables var input = document.getElementById("outOfThis"); var perMade = 0; input.addEventListener("keyup", function(event) { let iGotThis = document.getElementById("iGotThis").value; let outOfThis = document.getElementById("outOfThis").value; perMade = iGotThis / outOfThis; if (event.keyCode === 13) { event.preventDefault(); document.getElementById("submit").click(); } }); // This is where the useless section ends function perFunction() { alert(perMade); }; .margin { margin-left: 80px; } <!DOCTYPE html> <html> <body> <br> <br> <p class="margin"><b>Got </b></p><input type="number" class="margin" id="iGotThis"> <p class="margin"><b> out of </b></p><input type="number" class="margin" id="outOfThis"> <br> <br> <input type="submit" id="submit" class="margin" onclick="perFunction()"> </body> </html>