addEventListener question

@Tray2 I don't know if it makes a difference. But mine is actually in a foreach loop with multiple check boxes. You used id above.

But yes, the idea here is to instantly click and clear a check. It's actually a checkbook program.

I will try your example too. But it has to be class not not id.

Edit:

Another example I found and works is:

    document.querySelectorAll(".hclr").forEach(i => i.addEventListener("click", e => {
            const isclr = i.parentNode.dataset.isclr;
            alert(isclr);  --Just a test here--
           More code

For some reason Netbeans ide also shows e unused. So I believe here Netbeans is wrong.

@jlrdw That shouldn't make any difference, class, id, or tag for that matter, they all work the same. The id just makes it easier to find which was pressed, but then again you can use the name property as well for that.

@FilipBoe late now, will try tomorrow.

Edit:

The last one I tried was the same but with the e:

document.querySelectorAll(".hclr").forEach(i => i.addEventListener("click", (e) => handleClick(i)));

Changed and removed e:

document.querySelectorAll(".hclr").forEach(i => i.addEventListener("click", () => handleClick(i)));

All still works. Bear in mind I am also using data attribures. So:

    function handleClick(i)
    {
        const isclr = i.parentNode.dataset.isclr;
        alert(isclr);
        MORE CODE

I have used addEventListener in the past, but this is the first time using it in a foreach with class and data attributes.

Thanks both of you for answers, @tray2 sorry changing BA to @filipboe .

Maybe this post will help someone else also new to addEventListener techniques. My concern was the (e) I saw in several examples.

I wish @jeffreyway would allow multiple best answers.

Edit:

Anyone landing here also read:

https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#the_value_of_this_within_the_handler

arrow functions do not have their own this context.

Edit:

I see there are several ways to do this, but I still cannot get the event to work with data attributes. The code shows works, but when and how would event even be used here.

I understand event when not using data attributes. But I am new to looping a class like this.

I have narrowed it down to using one of these, either work good. I still don't get how event would come into play with the data attributes:

    document.querySelectorAll(".hclr").forEach(i => i.addEventListener("click", () => handleClick(i)));

   OR

    document.querySelectorAll(".hclr").forEach(i => i.addEventListener("click", function () {
                  handleClick(i);
          }));

So far I have gone with the last one. If anyone understands how e (event) could be used please explain.

When I tried

console.log(e.target);

it only gives the td but not the data attribute.

Sorry bu last edit

After many searches I found out how event would be used:

   document.querySelectorAll(".hclr").forEach(i => i.addEventListener("click", function (e) {
            console.log(e.target.parentNode.parentNode.getAttribute("data-isclr"));
            const isclr = i.parentNode.dataset.isclr;
            more code

With the getAttribute I needed to add one more .parentNode.

But I still don't know which is better, dataset or getAttribute. I might start a new post.