this keyword binding issue in arrow function

Question

I am working on a test case for javascript bind this keyword with click eventlistener to arrow function and adding class using this keyword, I have tried to bind my function but every time this keyword is pointing to window object, which I want to point to event object.

here is my code.

const cards = document.querySelectorAll(".card");

var isFlipped = false;
var firstCard;
var secondCard;

const flip = ( ) => {
  console.log(this);
  this.classList.add("flip");
  if (!isFlipped) {
    isFlipped = true;
    firstCard = this;
  } else {
    secondCard = this;
    console.log(firstCard);
    console.log(secondCard);
  }
}

Array.from(cards).map(card => card.addEventListener("click", flip.bind(this) ));

here is the HTML incase you want to check

<div class="gameContainer">
      <div class="container">
        <h1 class="text-center text-white display-4">How is your memory</h1>
      </div>
      <div class="card" data-image="evilface">
        <img src="evilface.png" class="front flip" alt="evilface" />
        <img src="lco.png" class="back" alt="lco" />
      </div>
</div>

Note: of-course I can make arrow function to normal function and this will work as exprected, but I want this with arrow function.

Not possible, since in arrow functions, `this` is inherited lexically. — CertainPerformance, Sep 10 '20 at 18:37
yes, I know this is inherited, but there should be some work around to work this out? — C Modi, Sep 10 '20 at 18:40
The workaround is to use `function` instead, or pass in the scope as an argument instead of binding it. — John Montgomery, Sep 10 '20 at 18:42
its not the requirement, but i don't know any other way to bind the function with click listener — C Modi, Sep 10 '20 at 18:42
never mind, I found the solution, I have to bind this with event instead of this keyword.Not sure why this question is marked that it already asked, this question is different then previous asked questions — C Modi, Sep 10 '20 at 18:52
You asked about the `this` keyword, and the other questions answer that. If you asked "How can I get the element that was clicked on?", the answer would be different. — Barmar, Sep 10 '20 at 19:10

this keyword binding issue in arrow function

0 Answers0