JavaScript: OnClick with multiple elements return "windows" under this keyword

Question

I am trying to bind all elements to have onclick function. And while variable a is a, when I try to use keyword this inside of onclick it returns me Window object. Code:




    
    
    



    Część I
    Rozdział  1
44:10
    Rozdział  2
20:06
    Rozdział  3
19:16
    Rozdział  4
25:29
    Rozdział  5
32:16
    Rozdział  6
13:06
    Rozdział  7
28:38
    Rozdział  8
51:59

user_14588484 · Answer

In order to use this, you need to create a regular anonymous function rather than an arrow function.

const anchors = [...document.querySelectorAll("#stages a")];

anchors.forEach(a => {
   console.log(a);

   a.onclick = function () {
      console.log(this);
   };
});

user_8035977 · Answer

It's normal, as you're in window closure and you use an arrow function, if you need to have access to your element, you can add a prop to your arrow function like this:

const stages = [...document.querySelectorAll("#stages a")];
stages.forEach((a) => a.onclick = (e) => {
  console.log(e.currentTarget);
});




    
    
    



    Część I
    Rozdział  1
44:10
    Rozdział  2
20:06
    Rozdział  3
19:16
    Rozdział  4
25:29
    Rozdział  5
32:16
    Rozdział  6
13:06
    Rozdział  7
28:38
    Rozdział  8
51:59

JavaScript: OnClick with multiple elements return "windows" under this keyword

2 Answers