javascript - 需要帮助理解 onclick 以及如何从声明的变量中连续减去

Question

这是我的 HTML 代码:

<button id="remove10" onclick="subtract()">Remove 10</button>

<div id="final-answer">Final answer</div>

这是我的 JavaScript 代码:

var startingNumber = 100;
var minus10 = document.querySelector("#remove10");

function subtract() {
  startingNumber = startingNumber - 10;
}

minus10.onclick = subtract();

document.querySelector("#final-answer").innerHTML = startingNumber;

我的目标是，每次单击“删除 10”按钮时，它都会从初始值 100 中减去 10，并更改显示的文本以反射(reflect)答案。因此，第一次点击 - 显示 90，第二次点击 - 显示 80，等等。

我当前的代码从一开始就显示数字为 90，当我单击按钮时没有任何反应。我在这里做错了什么？

Answer 1

您的代码存在几个问题:

1. 您不需要在 HTML 和 JS 中分配 onclick 处理程序，一个就可以了。 JS 是更常见的选择。
2. 在 JS 中分配事件处理程序时，必须提供一个函数。 subtract() 调用该函数并将其结果(什么也没有)分配给 onclick。
3. 每次调用 subtract 时，您都需要更新 HTML。浏览器不会自动将 startingNumber 绑定(bind)到 #final-answer 的 innerHTML。

代码可能如下所示

var startingNumber = 100;
var minus10 = document.querySelector("#remove10");

function subtract() {
  startingNumber = startingNumber - 10;
  document.querySelector("#final-answer").innerHTML = startingNumber;
}

// you have to assign a function to "onclick", subtract() calls the function and  returns nothing
minus10.onclick = subtract;

document.querySelector("#final-answer").innerHTML = startingNumber;

<button id="remove10">Remove 10</button>

<div id="final-answer">Final answer</div>