Call Function With Classname.onclick Js

var el = document.getElementsByClassName('elements'); // this element contains more than 1 DOMs. el.onclick = function() { console.log('target name should be here')}; So I don't w

Solution 1:

You cannot attach an event listener to an array of objects, which is that function will be returning.

Instead, loop through the list returned and attach the event listener to each item.

Solution 2:

Instead of document.getElementsByClassName, it's better to use document.querySelectorAll as it's getElementsbyClassName returns you a live HTMLCollection whereas querySelectorAll returns you static NodeList.

var el = document.querySelectorAll(".elements"); // this element contains more than 1 DOMs.for(var i =0; i < el.length; i++) {
        el[i].onclick = function() { console.log("target name should be here")};
    }

In case you wan to track the element count inside your event handler, then its better to wrap the event handler inside IIFE

var el = document.querySelectorAll(".elements"); // this element contains more than 1 DOMs.// as it contains a NodeList, it's desirable to iterate through the list and bind events.                   for(var i =0; i < el.length; i++) {
      // Inside the event handler function, if you want to access i, then its better to wrap it inside IIFE
      (function(i) {
            el[i].onclick = function() { console.log("target name should be here")};   
       })(i);
   }

Solution 3:

Your selector returns an array of elements so you need to loop them.

var els = document.getElementsByClassName("elements"); 
// loops elsfor(var i = 0, x = els.length; i < x; i++) {
    els[i].onclick = function(){
        // do somethingconsole.log('target name should be here');
    }
}

Solution 4:

var el = document.getElementsByClassName("elements"); 
// this element contains more than 1 DOMs.for(var i=0;i < el.length;i++) {

el[i].addEventListener("click", function() { 
console.log("My index number is: " + i)});
}

This will loop through the node list returned by the query and return the index number on click into the console. If you need to get a specific element and the page is static(meaning the indexes are going to be the same) you can grab the index number through this process, then change the code so that on load you specify:

var el = document.getElementsByClassName("elements"); 
// this element contains more than 1 DOMs.var i = indexNumber; 
el[i].addEventListener("click", function() { 
// do whatever
});

where var i is the target index number.

Solution 5:

You either loop over all the elements referenced by the el variable and attach the event handler on each element as you see fit, or delegate the event handler to document for example and fire it accordingly.

Either way you choose, you should note that onclick prop and its siblings are not defined on HTMLCollection instances or any other array-like objects returned by querySelectorAll() etc.

//ES6 syntax, registering a click event handler on each element 
[].slice.call(document.getElementsByClassName('elements')).forEach(ele => ele.onclick = () =>console.log('whatever'));

//ES6, Event delegationdocument.addEventListener('click', eve => {
  eve.target.classList.contains('elements') ? console.log('whatever') : undefined ; 
});