JS中如何根据点击事件改变变量的值？

Question

我不知道如何在单击按钮时为变量 onClicked 赋予值 true

这就是我尝试做的：

let onCliked = false
document.querySelector("#answer1").addEventListener("click", function() {
   return true
})
if (onCliked == true) {
    i++
}

Answer 1

当您将函数传递给

.addEventListener

时，您会告诉 Web 浏览器在您正在侦听的元素收到特定事件时调用函数。因此，只会调用函数中的代码，并且从该函数返回任何内容都不会修改任何变量。浏览器不会等待事件发生，它只会记住在事件发生时调用该函数，然后立即开始执行

.addEventListener

之后的任何代码。这称为异步代码。

所以浏览器会这样读取你的代码：

1. 创建一个变量

   onCliked

   并将其设置为 false。浏览器通过这样做来响应。
2. 记住这一点：如果单击 ID 为

   #answer1

   的元素，则调用我传递的函数（该函数基本上不执行任何操作）。浏览器的响应方式是将此提醒放在脑后，然后像往常一样继续。此时该函数甚至还没有被调用。
3. 如果

   onCliked

   为 true，则递增

   i

   。浏览器响应“好吧，你只是告诉我将其设置为 false，从那以后没有任何改变（你所做的只是告诉我一个提醒），所以我不应该做任何事情”。

相反，您应该将最后一步放在步骤 2 中的函数内，以便浏览器在单击按钮时运行它。然后，您甚至不需要

onClicked

变量。像这样：

document.querySelector("#answer1").addEventListener("click", function () {
  i++;
});