How to add an event listener to multiple element IDs

Question

Below is my approach to add listener to multiple ids.

function onImageClick(event) {
//i am not getting below console msg
  console.log('Event Registered');
}

var queryResult = document.getElementsByClassName('ui-grid-cell');
Array.from(queryResult).forEach(function(element) {
  document.getElementById(element.id).addEventListener("click",onImageClick);
});

Above approach is not working for me. what mistake i am doing?

Answer 1

This approach should work :

var queryResult = document.getElementsByClassName('ui-grid-cell');
Array.from(queryResult).forEach(function(element) {
    element.addEventListener("click",onImageClick);
});

Answer 2

this will works

 function onImageClick(event) {
          alert('Event Registered');
        }
        
        var queryResult = document.getElementsByClassName('ui-grid-cell');
        
        for(var i=0;i<queryResult.length;i++){
        if(queryResult[i].id && queryResult[i].id !=""){
            document.getElementById(queryResult[i].id).addEventListener("click",onImageClick);
        }
        }

img{
margin:15px;
padding:10px;
border-radius:10px;
box-shadow:1px 1px 1px #ccc;
}

<img title='this should listen' src='https://www.google.com.eg/images/nav_logo242.png' class='ui-grid-cell' id='div1'/>
<img src='https://www.google.com.eg/images/nav_logo242.png' class='ui-grid-cell'/>
<img title='this should listen' src='https://www.google.com.eg/images/nav_logo242.png' class='ui-grid-cell' id='div2'/>
<img src='https://www.google.com.eg/images/nav_logo242.png' class='ui-grid-cell'/>

Answer 3

Your same code is working fine, perhaps you missed putting id to the image?

function onImageClick(event) {
//i am not getting below console msg
  console.log('Event Registered');
}

var queryResult = document.getElementsByClassName('ui-grid-cell');
Array.from(queryResult).forEach(function(element) {
  document.getElementById(element.id).addEventListener("click",onImageClick);
});

<img src="https://dummyimage.com/50x50/000/fff"
     class="ui-grid-cell" id="one">
<img src="https://dummyimage.com/50x50/ccc/fff"
class="ui-grid-cell" id="two">
<img src="https://dummyimage.com/50x50/123456/fff"
class="ui-grid-cell" id="three">

Answer 4

If you use JQuery just use this

$(".ui-grid-cell").click(function(){

});