javascript - 单击按钮时增加显示的数字

Question

我想在按下按钮时增加 h3 标签显示的数字，但似乎找不到解决方案。

var outPut = document.querySelector("#outPut");
var button1 = document.querySelector("#button1");

button1.addEventListener("click", () => {
  var num = 0;
  num += 1;
  outPut.innerHTML = num; 
})

<h1>Counter</h1>
<div id="display">
  <h3 id="outPut">0</h3>
</div>
<button id="button1">Count Up</button>
<button id="button2">Count Down</button>
<button id="button3">Count Up X2</button>
<button id="button4">Count Down X2</button>

Answer 1

您在错误的范围内声明了变量 (num)。由于您已在函数内声明了计数器变量 (num)，因此每次单击时都会使用初始值 0 创建该变量。要保留以前的值，请在函数外部声明变量。

另外，我建议您使用innerText或textContent如果文本是纯文本(不是 htmlString)，则使用 innerHTML。

var outPut = document.querySelector("#outPut");
var button1 = document.querySelector("#button1");
var num = 0;
button1.addEventListener("click", () => {
  num += 1;
  outPut.textContent = num; 
})

<h1>Counter</h1>
<div id="display">
  <h3 id="outPut">0</h3>
</div>
<button id="button1">Count Up</button>
<button id="button2">Count Down</button>
<button id="button3">Count Up X2</button>
<button id="button4">Count Down X2</button>