addEventListener未调用play函数，请问问题原因是什么？

数据老陈

2026-5-13

为什么你的play函数没有执行？

让我帮你排查一下问题，首先最可能导致play函数完全不执行的原因是DOM元素还没加载完成，你的JS代码就已经运行了，导致btn变量是null，调用addEventListener时直接抛出错误，整个脚本终止，自然不会触发后续的点击事件。

先解决核心问题：确保DOM加载完成后再执行JS

你可以把JS代码放在</body>标签的末尾，或者用DOMContentLoaded事件包裹代码：

document.addEventListener('DOMContentLoaded', function() {
  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，因为this指向的是btn元素，不是全局作用域
    rand = Math.floor(Math.random() *7)+1;
    sum += rand;
    one.textContent = sum;
    if(sum >= 100) {
      title.textContent = 'You won!'
    }
  }
});

再说说你代码里的其他问题（虽然不是导致play不执行的原因，但会让逻辑出错）：

你在play函数里用了this.rand，这里的this指向的是被点击的按钮元素，不是你之前声明的全局rand变量，所以你生成的随机数并没有赋值到全局的rand上，导致sum += rand一直加的是初始值0，sum永远不会增长到100。
变量count = 8200在函数里被重新赋值，但后续没有使用，这个可以考虑移除或者完善逻辑。