CODEWITHSUNDEEP
javascript
vwihw5xgpl
vwihw5xgpl

Reputation: 41

Cannot use addEventListener with for in loop

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>

Upvotes: 0

Views: 376

Answers (2)

Nexo
Nexo

Reputation: 2331

  • 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>

Upvotes: 0

Barmar
Barmar

Reputation: 780851

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>

Upvotes: 1

Related Questions