Tengo un div con 3 botones diferentes etiquetados del 1 al 3. Actualmente, los 3 botones usan un evento en línea que pasa su HTML interno como parámetro:
<div class="theClass"> <button onclick="doThing(this.innerHTML)">1</button> <button onclick="doThing(this.innerHTML)">2</button> <button onclick="doThing(this.innerHTML)">3</button> </div> <script> function doThing(num){ ... } </script>En un esfuerzo por evitar tanto la redundancia como las secuencias de comandos en línea, quiero saber cómo sería posible hacer esto sin una línea para cada botón. ¿Cómo haría que varios botones dentro de la misma clase llamen al mismo script externo? Es decir, ¿cómo puedo formatear una función para reconocer que se ha hecho clic en un botón dentro de una clase designada, obtener el HTML interno de ese botón y luego pasarlo como parámetro?
Puede seleccionar todos los botones con querySelectorAll , recorrer NodeList y usar addEventListener para agregar un detector de eventos de click que llame a doThing y pase el HTML interno del innerHTML como parámetro a cada botón:
const buttons = document.querySelectorAll('button'); buttons.forEach(e => e.addEventListener('click', function(){ doThing(this.innerHTML) })) function doThing(html){ console.log(html) } <div class="theClass"> <button>1</button> <button>2</button> <button>3</button> </div> Alternativamente, puede usar la delegación de eventos agregando un detector de eventos de click al documento y verificando si el objetivo es un botón (con Element.matches() ), y si es así, llame a doThing :
document.addEventListener('click', function(e){ if(e.target.matches('button')){ doThing(e.target.innerHTML) } }) function doThing(html){ console.log(html) } <div class="theClass"> <button>1</button> <button>2</button> <button>3</button> </div>