Breaking News: Grepper is joining You.com. Read the official announcement!

foreach function into arrow with addeventlistener

Elegant Eel answered on February 20, 2021 Popularity 3/10 Helpfulness 1/10

answer foreach function into arrow with addeventlistener

related foreach function into arrow with addeventlistener

foreach function into arrow with addeventlistener

Comment

const toggleElements = document.querySelectorAll('.toggle');
toggleElements.forEach(el => {
  el.addEventListener('click', function() {
    this.classList.toggle('active');
  });
});
In the example above, we use NodeList.prototype.forEach() to iterate over the nodes matching a given selector and EventTarget.addEventListener() with a regular function as the callback for the 'click' event to swap between an active and inactive state for the clicked element. As we are using a regular function, the this context inside the callback will be bound to the element on which the event was fired.

Arrow functions as callbacks
As we have already explained, arrow functions do not have their own bindings for this. So what happens if we convert the previous code snippet's callback to an arrow function? Its this context refers to the global one, which in this case is the window object.

const toggleElements = document.querySelectorAll('.toggle');
toggleElements.forEach(el => {
  el.addEventListener('click', () => {
    this.classList.toggle('active'); // `this` refers to `window`
    // Error: Cannot read property 'toggle' of undefined
  });
});
This code will throw an error anytime the matching element is clicked, firing the event listener and executing the callback, due to the window object not having a classList property. Oftentimes, however, the code could fail silently as it might for example check for a condition that always evaluates to false for window while it should evaluate to true for a given element, resulting in many headaches and wasted hours until the issue is discovered and fixed.

To deal with this, one could simply use the first argument of the callback function and Event.target or Event.currentTarget depending on their needs:

const toggleElements = document.querySelectorAll('.toggle');
toggleElements.forEach(el => {
  el.addEventListener('click', (e) => {
    e.currentTarget.classList.toggle('active'); // works correctly
  });
});
Image credit: Matthew Smith on Unsplash

Popularity 3/10 Helpfulness 1/10 Language javascript

Source: www.30secondsofcode.org

Tags: foreach function javascript

Link to this answer
Share Copy Link

Contributed on Feb 20 2021

Elegant Eel

0 Answers Avg Quality 2/10

Closely Related Answers

foreach function into arrow with addeventlistener

Comment

const toggleElements = document.querySelectorAll('.toggle');
toggleElements.forEach(el => {
  el.addEventListener('click', () => {
    this.classList.toggle('active'); // `this` refers to `window`
    // Error: Cannot read property 'toggle' of undefined
  });
});
This code will throw an error anytime the matching element is clicked, firing the event listener and executing the callback, due to the window object not having a classList property. Oftentimes, however, the code could fail silently as it might for example check for a condition that always evaluates to false for window while it should evaluate to true for a given element, resulting in many headaches and wasted hours until the issue is discovered and fixed.

To deal with this, one could simply use the first argument of the callback function and Event.target or Event.currentTarget depending on their needs:

const toggleElements = document.querySelectorAll('.toggle');
toggleElements.forEach(el => {
  el.addEventListener('click', (e) => {
    e.currentTarget.classList.toggle('active'); // works correctly
  });
});

Popularity 3/10 Helpfulness 7/10 Language javascript

Source: www.30secondsofcode.org

Tags: function javascript foreach

Link to this answer
Share Copy Link

Contributed on Feb 20 2021

Elegant Eel

0 Answers Avg Quality 2/10

foreach function into arrow with addeventlistener

Contents

More Related Answers

foreach function into arrow with addeventlistener

Closely Related Answers

foreach function into arrow with addeventlistener

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.