Question 259173 in Html Question posted in
Some basic documentation can be found here.

Html – Unable to add event listeners to multiple elements with common class-name. Loops give undefined error

code block in in my html file.

<script>
    document.addEventListener('readystatechange', event => {
      if (event.target.readyState === "complete") {
        let temp = document.getElementsByClassName('js-hand-button');
        temp.array.forEach(element => {
          element.addEventListener("click", handButtonClick)
        });
      }
    });

    // temp = document.getElementsByClassName('js-hand-button');
    // temp[0].addEventListener("click", handButtonClick);
    // temp[1].addEventListener("click", handButtonClick);
    // temp[2].addEventListener("click", handButtonClick);
  </script>

Have three buttons on my html page. For all of them, I want to add same event listener for "click".

The 4 lines that are comment out work perfectly. However, I’m thinking there should be an easier way to pull this off in case I have many buttons added later. I’ve tried using array.forEach and get the same error.

Is the only way to pull this off to add a timer to the webpage?

Error Message in console –> Uncaught TypeError: Cannot read properties of undefined (reading ‘forEach’)
at HTMLDocument.

Error when using temp.forEach instead of temp.array.forEach –> Uncaught TypeError: temp.forEach is not a function
at HTMLDocument.

I have tried moving this code block into a separate .js file but can’t escape the error. Also, tried defining the array beforehand with a static value as empty array but still getting the same errors.

Tags:

2

Answers


  1. 0

    I saw you mentioned you have buttons added later too. The best option is to use event delegation. Which means add the click handler to a parent element like document.body and look for what was clicked on. That will allow you to add/update and delete buttons dynamically and not have to worry about creating new event listeners etc.

    function handButtonClick(el){
  console.log("b");
}

document.body.addEventListener("click",(e) => {
  const el = e.target; //get the target of the click
  if(el.classList.contains("js-hand-button")){ //check if the clicked element has the appropriate class
    handButtonClick(el); 
  }
});
    <button class="js-hand-button">btn</button><button class="js-hand-button">btn</button><button class="js-hand-button">btn</button><button class="js-hand-button">btn</button><button class="js-hand-button">btn</button><button class="js-hand-button">btn</button><button class="js-hand-button">btn</button><button class="js-hand-button">btn</button><button class="js-hand-button">btn</button><button class="js-hand-button">btn</button><button class="js-hand-button">btn</button><button class="js-hand-button">btn</button><button class="js-hand-button">btn</button>
    Login or Signup to reply.
  2. 0

    Got it working with a for loop:

    document.addEventListener('readystatechange', event => {
  if (event.target.readyState === "complete") {
    let temp = document.getElementsByClassName('js-hand-button');
    
    for (var i = 0; i < temp.length; i++) {
       temp.item(i).addEventListener("click", handButtonClick);
    }
  }
});
    
function handButtonClick() {
  console.log("click!")
}
    <button class="js-hand-button">Button 1</button>
<button class="js-hand-button">Button 2</button>
<button class="js-hand-button">Button 3</button>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search