Javascript 单击按钮时递增显示的数字

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

var outPut=document.querySelector（“输出”）；
var button1=document.querySelector（“#button1”）；
按钮1.addEventListener（“单击”，（）=>{
var num=0；
num+=1；
outPut.innerHTML=num；
})

计数器
0
计算
倒计时
数到X2
倒计时X2

您在错误的范围内声明了变量（

num

）。由于您已在函数中声明了计数器变量（

num

），因此每次单击时，都会使用初始值

0

创建变量。要保留上一个值，请在函数外部声明变量

另外，如果文本是纯文本（不是htmlString），我建议您使用或代替

innerHTML

var outPut=document.querySelector（“输出”）；
var button1=document.querySelector（“#button1”）；
var num=0；
按钮1.addEventListener（“单击”，（）=>{
num+=1；
outPut.textContent=num；
})

计数器
0
计算
倒计时
数到X2
倒计时X2

稍微解释一下，在JavaScript中，变量具有基于函数的作用域。这意味着函数决定变量的存在位置并产生影响。这里的事件监听器是一个函数，这意味着如果您在其中声明

num

，它将在最后消失，并在下次单击按钮时重新声明，即重新开始。在这个答案中，变量被上移了一个级别，超出了函数的范围，因此它在两次单击之间保持不变to

outPut.textContent=num因为他只更改文本，而不更改
HTML
元素。。