Bueno, estoy tratando de hacer un setInterval() para dejar de usar clearInterval() , aquí está el código:
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>Como puede ver, no puede evitar que la cosa cuente, realmente me gustaría que se detuviera cuando presione detener.
Simplemente defina la variable de intervalo en el ámbito superior.
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;Gracias al comentario de Teemu , he solucionado mi problema:
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> Al crear el intervalo en el mismo bloque if en el que establecí el texto del botón en "Detener" y saqué la declaración t fuera de la función, lo arreglé para que funcione.