0

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);
});
2
  • Si abres la consola sale algún error?
    – user128299
    el 6 oct. 2020 a las 5:13
  • No, no sale ningún error.
    – VALNET VLN
    el 6 oct. 2020 a las 5:21

1 respuesta 1

2

Tu caso concreto me parece que has complicado mas de la cuenta el codigo, lo puedes simplificar mucho utilizando un interval en lugar de una funcion recursiva.

const $iniciarReloj = document.getElementById('iniciarReloj');
const $detenerReloj = document.getElementById('detenerReloj');
const $iniciarAlarma = document.getElementById('iniciarAlarma');
const $detenerAlarma = document.getElementById('detenerAlarma');

const $horas = document.querySelector('.horas');
const $puntero = document.querySelector('.puntero');
const $minutos = document.querySelector('.minutos');
const $segundos = document.querySelector('.segundos');
let interval;

function checkTime(i) {
    if (i < 10) {
        return `0${i}`;
    }
    return i;
}

function setTime() {
    // DATOS DE JAVASCRIP
    const date = new Date();
    const hora = date.getHours();
    let minutos = date.getMinutes();
    let segundos = date.getSeconds();

    // VERIFICANDO LOS SEGUNDOS Y MINUTOS
    minutos = checkTime(minutos);
    segundos = checkTime(segundos);

    $horas.textContent = hora;
    $minutos.textContent = minutos;
    $segundos.textContent = segundos;
}


// BOTON QUE INICIA LA HORA
$iniciarReloj.addEventListener('click', () => {
    // En caso de que exista ya un interval limpiarlo antes de crear uno nuevo para evitar que se duplique
    if (interval) {
        clearInterval(interval);
    }
    // Crear el intervalo que ejecutara setTime cada 1000 ms y almacenar el id en la variable interval
    interval = setInterval(setTime, 1000);
});

// BOTON QUE DETIENE LA HORA PERO NO FUNCIONA
$detenerReloj.addEventListener('click', () => {
    clearInterval(interval);
});
1
  • Gracias amigo, con lo que me pusiste pude hacer de nuevo esa parte de limpiar el intervalo, agregue el evento al document y cada que detecte el click pues se inicializa el interval, en caso contrario limpio el interval y todo funciona correctamente, de nuevo muchas gracias.
    – VALNET VLN
    el 7 oct. 2020 a las 3:10

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.