Question

我正在学习JavaScript的事件监听器。这是我的代码：

var x = 0;

document.getElementById("myBtn").addEventListener("click", myFunction);

function myFunction() {
    x++;
    document.getElementById('para').innerHTML = x ;
}

这是HTML：

<body>
  <h1>Headline</h1>
  <button id="myBtn" onclick="myFunction()">Click</button>
  <p id="para">Some text</p>
  <script src="JS.js"></script>
</body>

问题是在加载页面和单击按钮时都会调用myFunction()。为什么这样，我该如何解决？我试图将脚本放在HTML的头部但是它给了我一个错误，因为按钮元素尚未加载。

Answer 1

希望这会对你有所帮助

var x = 0;

document.getElementById("myBtn").addEventListener("click", myFunction);

function myFunction() {
    x++;
    document.getElementById('para').innerHTML = x ;
    console.log(x)
}

<body>
  <h1>Headline</h1>
  <button id="myBtn">Click</button>
  <p id="para">Some text</p>
</body>

因为您第一次点击时调用了两次功能

addEventListener - 函数在调用之前执行

1 个答案: