Set onclick event to a class of elements: how to get id of the one clicked? javascript only

Question

The problem:

I have 134 elements which must have an onclick event attached. I am doing this by now, on eeeeeeevery single one of them (and they have an ondbclick event attached too!):

<div id="id1" class="name" onclick="functionName(this.id)"></div>
<div id="id2" class="name" onclick="functionName(this.id)"></div>
<div id="id3" class="name" onclick="functionName(this.id)"></div>

but read in Eloquent Javascript (chapter 14) that this is considered bad practice, since it mixes html and javascript.

So I thought I could find a way to attach the onclick event to all of them together. I searched a few hours and tried a few things, like this: (from 'How do you set a JavaScript onclick event to a class with css' here on stackoverflow)

window.onload = function() {
    var elements = document.getElementsByClassName('nameOfTheClass');
    for(var i = 0; i < elements.length; i++) {
        var OneElement = elements[i];
        OneElement.onclick = function() {
           //do something
        }
    }
}

Which got the click to work on the elements, but not my function.

My original function was receiving two values, the id and the innerHTML of the element that got clicked, and now I cannot find a way to access that information.

I tried OneElement.id and OneElement.innerHTML just to find out that it gets the id and innerHTML of the last of the elements in the document.

Any clues? Any help very much appreciated! :)

Answer 1

When an event is triggered in JavaScript, it passes an event object to the callback function. Pass that into the signature and you will gain access to element's properties.

window.onload = function() {
    const elements = document.getElementsByClassName('nameOfTheClass');
    
    for (const element of elements) {
        element.addEventListener("click", e => {
            console.log("element was clicked", e.target.id, e.target.innerHTML);
        })
    }
}