Well, I am trying to make a setInterval() to stop using clearInterval(), here is the code:
let submitBPMkeeper = document.getElementById("submitBPMkeeper");
function startStopBPMkeeper(sr) {
let bpmKeepTrack = document.getElementById("bpmSet");
var test1 = 0;
var t = setInterval(bpmKTcounter, 60000 / bpmKeepTrack.value);
function bpmKTcounter() {
test1 += 1;
document.getElementById("testInput").innerHTML = test1;
}
if (sr == "start") {
submitBPMkeeper.innerHTML = "Stop";
} else if (sr == "stop") {
submitBPMkeeper.innerHTML = "Start";
clearInterval(t);
}
}
submitBPMkeeper.addEventListener("click", function() {
if (submitBPMkeeper.innerHTML == "Start") {
startStopBPMkeeper("start");
} else if (submitBPMkeeper.innerHTML == "Stop") {
startStopBPMkeeper("stop");
}
});<div id="bpm">
<h2>Tempo Keepper:</h2>
<label for="bpmSet">BPM:</label>
<input type="number" id="bpmSet" name="bpmSet" style="width:40px;" value="80">
<button id="submitBPMkeeper">Start</button>
<p id="baseInput"></p>
<p id="testInput"></p>
</div>As you can see you can't stop the thing from counting up, I would really like it to stop when you press stop.
Just define the interval variable in the upper scope.
const submitBPMkeeper = document.getElementById("submitBPMkeeper");
const bpmKeepTrack = document.getElementById("bpmSet");
let interval = null;
function toggleBPMKeeper() {
let test1 = 0;
function bpmKTcounter() {
test1 += 1;
document.getElementById("testInput").innerHTML = test1;
}
if (interval) {
clearInterval(interval);
interval = null;
submitBPMkeeper.innerHTML = "Start";
} else {
interval = setInterval(bpmKTcounter, 60000 / bpmKeepTrack.value)
submitBPMkeeper.innerHTML = "Stop";
}
}
submitBPMkeeper.onclick = toggleBPMKeeper;
Thanks to Teemu's comment, I have fixed my problem:
let submitBPMkeeper = document.getElementById("submitBPMkeeper");
var t;
function startStopBPMkeeper(sr) {
let bpmKeepTrack = document.getElementById("bpmSet");
var test1 = 0;
function bpmKTcounter() {
test1 += 1;
document.getElementById("testInput").innerHTML = test1;
}
if (sr == "start") {
submitBPMkeeper.innerHTML = "Stop";
t = setInterval(bpmKTcounter, 60000 / bpmKeepTrack.value);
} else if (sr == "stop") {
submitBPMkeeper.innerHTML = "Start";
clearInterval(t);
}
}
submitBPMkeeper.addEventListener("click", function() {
if (submitBPMkeeper.innerHTML == "Start") {
startStopBPMkeeper("start");
} else if (submitBPMkeeper.innerHTML == "Stop") {
startStopBPMkeeper("stop");
}
});<div id="bpm">
<h2>Tempo Keepper:</h2>
<label for="bpmSet">BPM:</label>
<input type="number" id="bpmSet" name="bpmSet" style="width:40px;" value="80">
<button id="submitBPMkeeper">Start</button>
<p id="baseInput"></p>
<p id="testInput"></p>
</div>By creating the interval in the same if block that I set the button text to "Stop", and pull the t declaration outside of the function, I had fixed it so that it works.