Tengo este script que ejecuta el reloj de un partido de fútbol, cuando hago clic en el botón de inicio, todo funciona correctamente, pero no puedo detener el reloj.
var count; function gameClock() { var minutesLabel = document.getElementById("minutes"); var secondsLabel = document.getElementById("seconds"); var totalSeconds = 0; var count = setInterval(function() { setTime() }, 1000); function setTime() { ++totalSeconds; secondsLabel.innerHTML = pad(totalSeconds % 60); minutesLabel.innerHTML = pad(parseInt(totalSeconds / 60)); } function pad(val) { var valString = val + ""; if (valString.length < 2) { return "0" + valString; } else { return valString; } } } //Start Stop Game Clock $(document).on('click', '#f_start', function() { $("#half_name").text('FIRST HALF'); gameClock(); // localStorage.setItem('first_half_click', getTime()); // localStorage.setItem('half', 1); }) $(document).on('click', '#f_stop', function() { clearInterval(count); }) <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <div class="col-2"> <button class="btn btn-success" id="f_start"> START</button> </div> <div class="col-2"> <button class="btn btn-danger" id="f_stop"> STOP</button> </div>Está volviendo a declarar la variable global de count dentro del método gameClock , lo que significa que su alcance solo está en esa función. cambie la asignación para usar la variable de count global en lugar de la variable local inútil.
var count = setInterval(function() { setTime() }, 1000); //to count = setInterval(function() { setTime() }, 1000);