Hola qué tal amigos aún soy nuevo en el lenguaje de JavaScript, sin embargo tengo un problema el cual he intentado solucionar y nomas no doy, no encuentro la solución. Tengo un evento en un botón el cual al presionarlo muestra la hora y tengo otro botón que detiene la hora pero al momento de darle clic al botón no pasa nada. Les anexo el código.
const $iniciarReloj = document.getElementById("iniciarReloj"),
$detenerReloj = document.getElementById("detenerReloj"),
$iniciarAlarma = document.getElementById("iniciarAlarma"),
$detenerAlarma = document.getElementById("detenerAlarma");
const $horas = document.querySelector(".horas"),
$puntero = document.querySelector(".puntero"),
$minutos = document.querySelector(".minutos"),
$segundos = document.querySelector(".segundos");
function setTime(){
//DATOS DE JAVASCRIP
let date = new Date(),
hora = date.getHours(),
minutos = date.getMinutes(),
segundos = date.getSeconds();
//VERIFICANDO LOS SEGUNDOS Y MINUTOS
minutos = checTime(minutos);
segundos = checTime(segundos);
$horas.textContent = hora;
$minutos.textContent = minutos;
$segundos.textContent = segundos;
setTimeout(function(){
setTime();
},500);
}
function checTime(i){
if(i<10){
i="0"+i;
}
return i;
}
//BOTON QUE INICIA LA HORA
$iniciarReloj.addEventListener("click",()=>{
setTime();
});
//BOTON QUE DETIENE LA HORA PERO NO FUNCIONA
$detenerReloj.addEventListener("click",function(){
$iniciarReloj.removeEventListener("click",setTime);
});