如何使用条件语句更新eventlistner内部的变量号

Question

请原谅，这似乎是一个简单的问题。我想在每次按下空格键时更新总和，同时更新innerHTML。每当我按下空格键时，它就会将sum变量连接起来，而不是简单地将其相加。

HTML

<div class="sec1 sec">
<h1>Spacebar Challenge</h1>
</div>
<div class="sec2 sec">
<p>
You have hit the spacebar <span>0</span> times.
</p>
<div class='button'><button>Restart</button> </div>
</div>
<div class="sec3 sec"></div>
<script src="app.js"></script>

JS

let span = document.querySelector("span")
document.body.addEventListener("keyup", function (e) {
let sum = 0
if (e.code === "Space") {
sum += 1
}
span.innerHTML += sum
})

Answer 1

尝试:

let span = document.querySelector("span")
let sum = 0
document.body.addEventListener("keyup", function(e) {
if (e.code === "Space") {
sum += 1
}
span.innerHTML = sum
})

<div class="sec1 sec">
<h1>Spacebar Challenge</h1>
</div>
<div class="sec2 sec">
<p>
You have hit the spacebar <span>0</span> times.
</p>
<div class='button'><button>Restart</button> </div>
</div>
<div class="sec3 sec"></div>
<script src="app.js"></script>