Please excuse me as if this seems like a simple question. I want to update the sum every time the space bar key is pressed down along with updating the innerHTML. Whenever I press the spacebar it just concatenates my sum variable instead of simply adding it.
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
})
Try:
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>