0

Estoy intentando insertar un cronómetro en un archivo php, el problema es que al cargarse la página, el tiempo comienza a correr de inmediato y los botones no son reconocidos. Este es mi código: js

var hoursLabel = document.getElementById("hours");
var minutesLabel = document.getElementById("minutes");
var secondsLabel = document.getElementById("seconds");
var start = document.getElementById("start");
var stop = document.getElementById("stop");
     
var totalSeconds = 0;
     
var myInterval = setInterval(setTime, 1000);
          
start.addEventListener("click", myInterval );
stop.addEventListener("click", stop);
     
function setTime() {
  ++totalSeconds;
  secondsLabel.innerHTML = pad(totalSeconds % 60);
  minutesLabel.innerHTML = pad(parseInt(totalSeconds / 60));
  hoursLabel.innerHTML = pad(parseInt(totalSeconds/3600));
}
     
function pad(val) {
  var valString = val + "";
  if (valString.length < 2) {
    return "0" + valString;
  } else {
    return valString;
   }
}
     
function stop(){
  clearInterval(myInterval);
}
<button id="start" >start</button> <button id="stop" >stop</button> <label id="hours">00</label>:<label id="minutes">00</label>:<label id="seconds">00</label>

Cabe mencionar que el archivo php está recibiendo el script porque lo comprobé anteriormente.

2 respuestas 2

1

Te he cambiado un par de cosas en tu código:

var hoursLabel = document.getElementById("hours");
var minutesLabel = document.getElementById("minutes");
var secondsLabel = document.getElementById("seconds");
var start = document.getElementById("start");
var stop = document.getElementById("stop");

var totalSeconds = 0;

var myInterval;


start.addEventListener("click", startFun);
stop.addEventListener("click", stopFun);

function setTime() {
  ++totalSeconds;
  secondsLabel.innerHTML = pad(totalSeconds % 60);
  minutesLabel.innerHTML = pad(parseInt(totalSeconds / 60));
  hoursLabel.innerHTML = pad(parseInt(totalSeconds/3600));
}

function pad(val) {
  var valString = val + "";
  if (valString.length < 2) {
    return "0" + valString;
  } else {
    return valString;
  }
}

function startFun() {
  myInterval = setInterval(setTime, 1000);
}

function stopFun(){
    clearInterval(myInterval);
}
<button id="start" >start</button> <button id="stop" >stop</button> <label id="hours">00</label>:<label id="minutes">00</label>:<label id="seconds">00</label>

En primer lugar he cambiado los listeners para que ejecuten las funciones startFun y stopFun. Tu tenías duplicado el identificador stop: en un caso para el elemento del botón y en otro para el listener del evento. Sería esta parte de aquí:

start.addEventListener("click", startFun);
stop.addEventListener("click", stopFun);

Luego me he llevado lo que hacías para iniciar myInterval al listener startFun que es lo que ocurre cuando pulsas el botón, así no se ejecuta al inicio de la aplicación, se ejecuta solo si le das al botón. Sería esto:

function startFun() {
   myInterval = setInterval(setTime, 1000);
}
0

Pon la variable como una función

var myInterval = () => { setInterval(setTime, 1000);}

En lugar de

var myInterval = setInterval(setTime, 1000);

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.