How to add event listener to each class in an html collection?

Question

I\'m attempting to get all elements by the class of \'element\' and adding an event listener to each of them. however, getElementsByClassName() returns and html

Answer 1

You could use document.querySelectorAll(".element") instead. This will use CSS selectors to query the dom (in this case the class "element").

var tableElements = document.querySelectorAll(".element");

tableElements.forEach(function(element) {
    element.addEventListener("click", function() {
        dispElementData(this);
    });
});

Answer 2

Sorry! My code above works fine! Turns out that my JS code was executing before the DOM was done loading. Thanks for the the help. The solution was to add an evt listener document object and then call the function once it was completely loaded:

document.addEventListener("DOMContentLoaded", function(){
                  var tableElements = document.getElementsByClassName("element");  
             for(var i=0;i<tableElements.length;i++){ 
                tableElements[i].addEventListener("click", dispElementData(this)); 
              }
})