Почему при клике на кнопку выводится NaN?

Question

[Ruslan]

Почему в коде ниже ответ при клике на кнопку выводится NaN?

'use strict';
class GOD{
  constructor(){
    this.counter = 0;
  }
  handleClick(){
   this.counter+=1;
    console.log(this.counter)
  }
}

const buton = document.querySelector("button");
const cls = new GOD();
buton.addEventListener("click", cls.handleClick);

Comments

[Сергей delphinpro]

JavaScripte code?

Что означает сей вопрос?

[Вадим]

Ruslan, Правила сервиса:

3.2. Формулировать вопрос максимально информативно и однозначно. Использование общих формулировок приводит к тому, что пользователи оказываются вынуждены тратить время на ознакомление с вопросом, хотя он может быть заведомо им не интересен. Поэтому, вместо общих формулировок (например, «Где найти драйвер на принтер?»), следует использовать максимально детальные формулировки (например, «Где найти драйвер на EPSON L110 под Linux Mint 18.1 Cinnamon?»).

Answer 1

[Rsa97]

Потому что this в момент вызова события указывает на элемент button, а не на cls.

Comments

[Ruslan]

Спасибо за объяснение

Answer 2

[Роман]

потому что handleClick теряет свой контекст. Решается так:

buton.addEventListener("click", ()=>cls.handleClick());

или так

buton.addEventListener("click", cls.handleClick.bind(cls));

Answer 3

[Сергей delphinpro]

Почему в коде ниже ответ при клике на кнопку выводится NaN?

Потому что вы не понимаете что такое контекст. Изучите внимательно тему про this в javascript.

Решение без объяснения

const cls = new GOD();
buton.addEventListener("click", cls.handleClick.bind(cls));

Comments

[Ruslan]

спасибо