Entonces, estoy tratando de construir una calculadora y lo primero que quiero hacer es mostrar todos los botones en mi salida. Creé una función llamada displayButtons y dentro, obtuve los primeros 2 botones por id, sin embargo, cuando trato de mostrarlos, solo se muestra el número 2. Una forma de solucionar esto es crear una función para cada número y luego funcionará, pero eso no es lo que quiero. También intenté anidar las funciones para cada número dentro de una función, pero no pude llamarlo correctamente al hacer clic. ¿Algunas ideas? ¡Gracias por adelantado!
Código HTML:
<div id="output"></div> <div class="numbers"> <button value="1" id="one" onclick="displayButtons()">1</button> <button value="2" id="two" onclick="displayButtons()">2</button>Código JS:
function displayButtons() { var one = document.getElementById("one").value; document.getElementById("output").innerHTML = one; var two = document.getElementById("two").value; document.getElementById("output").innerHTML = two }¿Has probado un bucle for? podría agregar una funcionalidad de clic con una palabra clave de cierre o 'let' o una función separada ... ejecute lo siguiente en codepen, vea cómo funciona y si esto es algo que puede ser útil.
function createButtons() { //let is block scoped, not function scoped for (let i = 1; i <= 5; i++) { var body = document.getElementsByTagName("BODY")[0]; var button = document.createElement("BUTTON"); button.innerHTML = 'Button ' + i; button.onclick = function() { alert('This is button ' + i); } body.appendChild(button); } } createButtons();Hay múltiples soluciones para esto, pero aquí hay una simple: puede usar los datos del evento para obtener la información del botón en el que se hizo clic, luego puede hacer lo que quiera con estos valores.
HTML
<div id="output"></div> <div class="numbers"> <button value="1" id="one">1</button> <button value="2" id="two">2</button> </div>JS
document.querySelectorAll('.numbers button').forEach(button => { button.addEventListener('click', (e) => { console.log(e.target.id, e.target.value) }) })Para mostrar el resultado al hacer clic en los números, puede pasar this objeto dentro de la función como esta
<button value="1" id="one" onclick="displayButtons(this)">1</button>y cuando haga clic en él, recibirá el nodo de botón dentro de la función, el código completo sería
<div class="numbers"> <button value="1" id="one" onclick="displayButtons(this)">1</button> <button value="2" id="two" onclick="displayButtons(this)">2</button> </div> <script> function displayButtons(button) { document.getElementById("output").innerHTML += button.value } </script>