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.

>Solution :

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>