I'm trying to use the for...in loop to add the event listener to the button because I don't want to repeat myself in case there are many buttons/elements. But it gives me an error of key.addEventListener is not a function. What am I doing wrong here?
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 is the string key of the object, not the DOM element in the variable with the same name.
Put the DOM elements in the object as well.
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'); this statment selects all buttons from DOM.buttons.forEach foreach loop through all the buttons and add click event it's easier and readable.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>