Estoy haciendo una calculadora simple usando html y Javascript. Aquí está el código que funciona y actualiza la pantalla de la calculadora cuando se hace clic en el botón.
const display = document.querySelector('#display'); const cells = document.querySelectorAll('.cell'); cells.forEach((cell) => { cell.addEventListener('click', (e) => { if (e.target.value !== NaN) { a = e.target.value; } else { a = parseInt(e.target.value, 10); }; display.textContent += a + ' '; }); });Estoy tratando de guardar el valor del botón en una variable global para poder usarlo más tarde en operaciones matemáticas como se muestra a continuación. Declaré una variable global x e intenté actualizarla cuando se hacía clic en los botones.
const display = document.querySelector('#display'); let x; const cells = document.querySelectorAll('.cell'); cells.forEach((cell) => { cell.addEventListener('click', (e) => { if (e.target.value !== NaN) { a = e.target.value; x = a; } else { a = parseInt(e.target.value, 10); x = a; }; display.textContent += a + ' '; }); }); console.log(x);El display.textContent funciona según lo previsto, pero console.log(x) no se actualiza cuando se hace clic en los botones. ¿Cómo actualizo la variable x con button.value?
Está accediendo a la variable antes de que se le asigne el valor.
Se llamará a la función onClick cuando el usuario haga clic en el elemento ".cell"
const display = document.getElementById('#display'); let x; const cells = document.querySelectorAll('.cell'); cells.forEach((cell) => { cell.addEventListener('click', (e) => { if (e.target.value !== NaN) { a = e.target.value; x = a; } else { a = parseInt(e.target.value, 10); x = a; }; display.textContent += a + ' '; }); }); // Called first console.log(x); // Asyn call setInterval(function(){ console.log("from Interval"); console.log(x); }, 1000) input { display: block; } <div id="#display"></div> <input class="cell" value="1"/> <input class="cell" value="2"/> <input class="cell" value="3"/>Además de no mostrar x fuera de donde lo configuró, le sugiero que delegue
const getNum = n => !isNaN(parseFloat(n)) && isFinite(n) ? parseInt(n) : 0; window.addEventListener("load", function() { // on page load const calc = document.getElementById('calc'); const display = document.getElementById('#display'); let x; calc.addEventListener('click', (e) => { const tgt = e.target; if (tgt.classList.contains("cell")) { x = getNum(tgt.value) display.textContent += x + ' '; console.log(x); } }); }); input { display: block; } <div id="#display"></div> <div id="calc"> <input class="cell" value="1" /> <input class="cell" value="2" /> <input class="cell" value="3" /> </div>