Enrty для добавленияEventListener

Question

Добавление прослушивателя событий Не вызывает функцию воспроизведения, и я не понимаю, почему?

var btn = document.querySelector('#btn');
var title = document.querySelector('#title');
var count = 0, rand = 0 , sum =0;
var one = document.getElementById('one');
btn.addEventListener('click',play);


function play()
{
count = 8200;
this.rand = Math.floor(Math.random() *7)+1;
this.sum +=rand;
one.textContent = sum;
if(sum >= 100)
    {
        title.textContent = 'You won!'
    }
}

Я попытался отладить идентификатор в отладчике Firefox, и он показывает, что он переходит непосредственно в конецкод.почему метод воспроизведения не выполняется?

Answer 1

Не следует использовать this.this внутри play() будет элементом btn, для которого инициируется событие.

При присоединении функции-обработчика к элементу с использованием addEventListener() значение this внутри обработчика находится ссылка на элемент

См. Значение this внутри обработчика

var btn = document.querySelector('#btn');
var title = document.querySelector('#title');
var count = 0, rand = 0 , sum =0;
var one = document.getElementById('one');
btn.addEventListener('click',play);


function play()
{
  count = 8200;
  rand = Math.floor(Math.random() *7)+1;
  sum +=rand;
  one.textContent = sum;
  if(sum >= 100)
  {
     title.textContent = 'You won!'
  }
}

<button id="btn">click</button>
<div id="title">Title</div>
<div id="one"></div>