Estoy haciendo una calculadora con javascript puro. Necesito el número dentro del botón para imprimir si hago clic en el botón una vez. como si hago clic en 1, debería mostrar 1 en mi pantalla y si hago clic en 2, debería mostrar 2 en mi pantalla. solo el numero 2 sin 1...
<button>1</button> <button>2</button> <button>3</button> <button>4</button> <button>5</button> <button>6</button> <button>6</button> <button>8</button> <button>9</button> <button>10</button>¿Cómo puedo hacer eso sin el evento onclick?
const display = document.getElementById('display') document.getElementById('buttons').addEventListener('click', ({target}) => { console.log(target.innerText) display.innerHTML = target.innerText; }) <div id="buttons"> <button>1</button> <button>2</button> <button>3</button> <button>4</button> <button>5</button> <button>6</button> <button>6</button> <button>8</button> <button>9</button> <button>10</button> </div> <div id="display"></div>Puede usar document.querySlectorAll . Esto dará una lista de nodos, luego iterará a través de ella y agregará un detector de eventos, de modo que al hacer clic se muestre el contenido del texto en un área de visualización.
const displayContainer = document.getElementById('display') document.querySelectorAll('button').forEach((item) => { item.addEventListener('click', (e) => { displayContainer.innerHTML = e.target.textContent.trim(); }) }) <button>1</button> <button>2</button> <button>3</button> <button>4</button> <button>5</button> <button>6</button> <button>6</button> <button>8</button> <button>9</button> <button>10</button> <div id='display'></div>Esto debería ponerte en marcha.
querySelectorAll ] para seleccionar todos los botones.eventListener a todos los botones.event.target para obtener el valor del botón y hacer la lógica desde allí. const h1 = document.querySelector("h1"); const btns = document.querySelectorAll("button"); btns.forEach(btn => { btn.addEventListener('click', event => { h1.textContent = event.target.textContent; }); }); <button>1</button> <button>2</button> <button>3</button> <button>4</button> <button>5</button> <button>6</button> <button>6</button> <button>8</button> <button>9</button> <button>0</button> <h1></h1>