Estoy tratando de usar el bucle for...in para agregar el detector de eventos al botón porque no quiero repetirme en caso de que haya muchos botones/elementos. Pero me da error de key.addEventListener is not a function . ¿Qué estoy haciendo mal aquí?
const firstBtn = document.querySelector('.first-btn'); const secondBtn = document.querySelector('.second-btn'); const data = { firstBtn:'apple', secondBtn:'orange' }; for(const key in data) { key.addEventListener('click', function() { console.log(data[key]); }); } <button class="first-btn">First</button> <button class="second-btn">Second</button>key es la clave de cadena del objeto, no el elemento DOM en la variable con el mismo nombre.
Ponga los elementos DOM en el objeto también.
const firstBtn = document.querySelector('.first-btn'); const secondBtn = document.querySelector('.second-btn'); const data = [{ el: firstBtn, msg: 'apple' }, { el: secondBtn, msg: 'orange' } ]; for (const obj of data) { obj.el.addEventListener('click', function() { console.log(obj.msg); }); } <button class="first-btn">First</button> <button class="second-btn">Second</button>document.querySelectorAll('button'); esta declaración selecciona todos los botones de DOM.buttons.forEach foreach recorre todos los botones y agrega un evento de clic, es más fácil y legible. const buttons = document.querySelectorAll('button'); buttons.forEach(btn => { btn.addEventListener('click', function() { console.log(btn); }); }) <button class="first-btn">First</button> <button class="second-btn">Second</button>