Could someone help me with clearing the interval and resetting the score in my code? It seems to be working fine, but when the score goes over 1000 and I hit reset, it doesn’t reset completely.
I've tried placing the clearTimeout functions before everything else and attempted to merge them into one function, but I couldn't get it to work. If there's a simpler way to combine them or any other approach to solve this issue, that would be greatly appreciated.
const btnElement = document.getElementById("btn");
const btnElement1 = document.getElementById("btn1");
const btnElement2 = document.getElementById("btn2");
const btnElement3 = document.getElementById("btn3");
const btnElement4 = document.getElementById("btn4");
const btnElement5 = document.getElementById("btn5");
const spnElement = document.getElementById("span");
let score = 1;
let intervalTimer;
let intervalTimer1;
let intervalTimer2;
let intervalTimer3
btnElement2.addEventListener("click", () => {
if (score < 10) {
console.log("poor");
} else if (score >= 10) {
score -= 10;
spnElement.innerText = score;
intervalTimer = setInterval(increment, 1000);
function increment() {
score = score % 1000000 + 1;
spnElement.innerText = score;
}
}
})
btnElement3.addEventListener("click", () => {
if (score < 30) {
console.log("poor");
} else if (score >= 30) {
score -= 30;
spnElement.innerText = score;
intervalTimer1 = setInterval(increment1, 1000);
function increment1() {
score = score % 1000000 + 5;
spnElement.innerText = score;
}
}
})
btnElement4.addEventListener("click", () => {
if (score < 80) {
console.log("poor");
} else if (score >= 80) {
score -= 80;
spnElement.innerText = score;
intervalTimer2 = setInterval(increment2, 1000);
function increment2() {
score = score % 1000000 + 10;
spnElement.innerText = score;
}
}
})
btnElement5.addEventListener("click", () => {
if (score < 200) {
console.log("poor");
} else if (score >= 200) {
score -= 200;
spnElement.innerText = score;
intervalTimer3 = setInterval(increment3, 1000);
function increment2() {
score = score % 1000000 + 30;
spnElement.innerText = score;
}
}
})
btnElement.addEventListener("click", () => {
spnElement.innerText = score++;
})
btnElement1.addEventListener("click", () => {
clearTimeout(intervalTimer);
clearTimeout(intervalTimer1);
clearTimeout(intervalTimer2);
clearTimeout(intervalTimer3);
spnElement.innerText = 0;
score = 1;
})
document.body.addEventListener("keyup", function(event) {
if (event.code === "Space") {
spnElement.innerText = score++;
}
})
document.body.addEventListener("keydown", function(event) {
if (event.code === "Space") {
spnElement.innerText = score;
}
})
document.body.addEventListener("keydown", function(event) {
if (event.code === "Enter") {
clearTimeout(intervalTimer);
clearTimeout(intervalTimer1);
clearTimeout(intervalTimer2);
clearTimeout(intervalTimer3);
spnElement.innerText = 0;
score = 1;
}
})body {
background-color: moccasin;
color: #333;
font-family: Arial, Helvetica, sans-serif;
}
#header {
background-color: whitesmoke;
position: absolute;
right: 0;
top: 0px;
margin: 0px;
border-width: 2px;
border-bottom-width: 2px;
border-bottom-color: #333;
border-bottom-style: solid;
width: 100.09%;
}
#btns {
text-align: center;
font-family: Arial, Helvetica, sans-serif;
margin: 135px;
}
.btns {
background-color: dimgray;
color: whitesmoke;
border: 0;
border-radius: 5px;
}
.btns:hover {
background-color: mediumpurple;
}
#upgradeButtons {
margin: 20px;
}
#text {
text-align: center;
}<div id="header">
<div id="text">
<h1>Skibidi Clicker</h1>
<h2><span id="span">0</span></h2>
</div>
</div>
<div id="btns" class="btns">
<button id="btn" class="btns">+</button>
<button id="btn1" class="btns">Reset</button><br>
<div id="upgradeButtons">
<button id="btn2" class="btns">Skibidi (10 clicks)</button><br>
<button id="btn3" class="btns">Cameraman (30 clicks)</button><br>
<button id="btn4" class="btns">Speakerman (80 clicks)</button><br>
<button id="btn5" class="btns">Astro Toilet (200 clicks)</button>
</div>
</div>