Adding event listeners to an array of elements using forEach

Question

I created nine blue div boxes and I'm trying to write a Javascript that will set the opacity of each box to 0 once the box is hovered over. I made an array of all the boxes but when I try to apply addEventListener to each array element using forEach method it returns "Cannot set properties of undefined" error. What mistake am I making?

const boxes=document.getElementsByClassName("box");
const arrayOfBoxes=Array.from(boxes);
arrayOfBoxes.forEach((box)=>{box.addEventListener("mouseover",hide)});

function hide(element){
    element.style.opacity=0.0;
}

<div class="boxes">
    <div class="box" style="background-color: blue; height:100px; width:100px; margin: 5px"></div>
    <div class="box" style="background-color: blue; height:100px; width:100px; margin: 5px"></div>
    <div class="box" style="background-color: blue; height:100px; width:100px; margin: 5px"></div>
    <div class="box" style="background-color: blue; height:100px; width:100px; margin: 5px"></div>
    <div class="box" style="background-color: blue; height:100px; width:100px; margin: 5px"></div>
    <div class="box" style="background-color: blue; height:100px; width:100px; margin: 5px"></div>
    <div class="box" style="background-color: blue; height:100px; width:100px; margin: 5px"></div>
    <div class="box" style="background-color: blue; height:100px; width:100px; margin: 5px"></div>
    <div class="box" style="background-color: blue; height:100px; width:100px; margin: 5px"></div>
</div>

NodeList implements forEach(), you don't need Array.from() — Barmar
– Barmar, Commented Jul 27, 2022 at 22:28

IT goldman · Accepted Answer · 2022-07-27 22:28:55Z

Did you know you could achieve this using CSS only?

.box {
  opacity: 1;
  transition: 250ms all;
  float: left;
}

.box:hover {
  opacity: 0;
}

<div class="boxes">
  <div class="box" style="background-color: blue; height:100px; width:100px; margin: 5px"></div>
  <div class="box" style="background-color: blue; height:100px; width:100px; margin: 5px"></div>
  <div class="box" style="background-color: blue; height:100px; width:100px; margin: 5px"></div>
  <div class="box" style="background-color: blue; height:100px; width:100px; margin: 5px"></div>
  <div class="box" style="background-color: blue; height:100px; width:100px; margin: 5px"></div>
  <div class="box" style="background-color: blue; height:100px; width:100px; margin: 5px"></div>
  <div class="box" style="background-color: blue; height:100px; width:100px; margin: 5px"></div>
  <div class="box" style="background-color: blue; height:100px; width:100px; margin: 5px"></div>
  <div class="box" style="background-color: blue; height:100px; width:100px; margin: 5px"></div>
</div>

Barmar · Accepted Answer · 2022-07-27 22:28:59Z

1

The argument to an event listener is the event, not the element. So use event.currentTarget to get the element.

function hide(event){
    event.currentTarget.style.opacity=0.0;
}

answered Jul 27, 2022 at 22:28

Barmar

789k57 gold badges554 silver badges669 bronze badges

4 Comments

mstephen19 Over a year ago

but currentTarget returns the element onto which the event listener was added.

Barmar Over a year ago

What's wrong with that here? They want to set the opacity of the box.

mstephen19 Over a year ago

Check my answer. You're leading him to a solution that works, but it's a crap solution and he'll be adding event listeners to every div on the page if we don't stop him

Barmar Over a year ago

@mstephen19 He's already doing that with the forEach() loop. I'm not redesigning, just fixing the bug.

mstephen19 · Accepted Answer · 2022-07-27 22:36:53Z

Instead of adding an event listener to every single div (which can cause problems as the number of divs likely increases), just add one event listener to the parent element that listens for the 'mouseover' event to achieve the same exact goal.

const boxes = document.querySelector('div.boxes');

const handleHover = (e) => {
    if (e.target === boxes) return;
    e.target.style.opacity = 0;
};

boxes.addEventListener('mouseover', handleHover);

<div class="boxes" style="display: flex; flex-direction: column; gap: 10px">
    <div class="box" style="background-color: blue; height: 100px; width: 100px"></div>
    <div class="box" style="background-color: blue; height: 100px; width: 100px"></div>
    <div class="box" style="background-color: blue; height: 100px; width: 100px"></div>
    <div class="box" style="background-color: blue; height: 100px; width: 100px"></div>
    <div class="box" style="background-color: blue; height: 100px; width: 100px"></div>
    <div class="box" style="background-color: blue; height: 100px; width: 100px"></div>
    <div class="box" style="background-color: blue; height: 100px; width: 100px"></div>
    <div class="box" style="background-color: blue; height: 100px; width: 100px"></div>
    <div class="box" style="background-color: blue; height: 100px; width: 100px"></div>
</div>

zer00ne · Accepted Answer · 2022-07-27 22:48:21Z

There's three ways to identify the actual tag a user has interacted with:

//.target property points to the tag the user interacted with
event.target.style.opacity = '0.0';

/*
.currentTarget property points to the tag that the event listener is attached to.
*/
event.currentTarget.style.opacity = '0.0';

/*
"this" a keyword that points to an object. If "this" is in an event handler, it
will point to the same thing .currentTarget points to.
*/
this.style.opacity ="0.0"

Also, the event handler passes the event object by default, so when you passed element, it was considered the event object. In order not to confuse anyone that happens to read your code, choose a more accurate moniker like: event, e, evt, etc.

const boxes=document.getElementsByClassName("box");
const arrayOfBoxes=Array.from(boxes);
arrayOfBoxes.forEach((box)=>{box.addEventListener("mouseover",hide)});

function hide(event) {
    this.style.opacity=0.0;
}

<div class="boxes">
    <div class="box" style="background-color: blue; height:100px; width:100px; margin: 5px"></div>
    <div class="box" style="background-color: blue; height:100px; width:100px; margin: 5px"></div>
    <div class="box" style="background-color: blue; height:100px; width:100px; margin: 5px"></div>
    <div class="box" style="background-color: blue; height:100px; width:100px; margin: 5px"></div>
    <div class="box" style="background-color: blue; height:100px; width:100px; margin: 5px"></div>
    <div class="box" style="background-color: blue; height:100px; width:100px; margin: 5px"></div>
    <div class="box" style="background-color: blue; height:100px; width:100px; margin: 5px"></div>
    <div class="box" style="background-color: blue; height:100px; width:100px; margin: 5px"></div>
    <div class="box" style="background-color: blue; height:100px; width:100px; margin: 5px"></div>
</div>

Collectives™ on Stack Overflow

Adding event listeners to an array of elements using forEach

4 Answers 4

Comments

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related