Cannot use addEventListener with for in loop-CodePudding

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 >First</button>
<button >Second</button>

CodePudding user response：

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 >First</button>
<button >Second</button>

CodePudding user response：

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 >First</button>
<button >Second</button>