1

Estoy intentando hacer una "alarma" en HTML y JS. El usuario debería poner una fecha/hora concreta, y cuando el botón "iniciar" se presionara, entonces debería establecerse un temporizador hasta la fecha introducida.

El código funciona con todos los valores introducidos de antemano y si la función se ejecuta cuando la página web se inicia.

Ahora bien, a la que intento hacer que el temporizador obtenga los valores del input y se ponga en marcha al pulsar el botón, la función se ejecuta de inmediato.

Este es mi código, si quieren verlo en acción está en mi replit, aquí.

year = parseInt(document.getElementById("year").value)
month = parseInt(document.getElementById("month").value)
day = parseInt(document.getElementById("day").value)
hour = parseInt(document.getElementById("hour").value)
minute = parseInt(document.getElementById("minute").value)

function setAlarm() {
  //year, month 0-11, date, hour, min
  var eta_ms = new Date(year, month-1, day, hour, minute).getTime() - Date.now();
  var timeout = setTimeout(() => {
    alert("IT'S TIME YEAH!")
  }, eta_ms);
}
      <div class="container">
  <p>Year <input type="number" id="year"></p>
  <p>Month (number) <input type="number" id="month"></p>
  <p>Day <input type="number" id="day"></p>
  <p>Hour <input type="number" id="hour"></p>
  <p>Minute <input type="number" id="minute"></p>
  <button onclick="setAlarm()" class="btn">Set alarm!</button>
</div>

Llevo un buen rato cambiando cosas y no he conseguido solucionar nada, ojalá podáis ayudarme a encontrar qué hago mal, porque con los valores "hardcoded" y ejecutando la función al inicio todo funciona bien. Muchas gracias. ^^

6
  • 2
    Debes leer los valores de los elementos input dentro de tu función, ya que al momento de cargarse la página, dichos valores devuelven undefined y luego al ejecutar tu función estás pasando como parámetro de año, mes, día, etc. valores undefined. Es por ello que el calculo de tu fecha devuelve NaN, y esto provoca que el método setTimeout() se ejecute inmediatamente. Saludos el 3 jul. 2021 a las 15:46
  • ¡Muchísimas gracias! Eso solucionó mi problema. ^^ Una cosa, ¿lo escribo como respuesta, o lo haces tú? ¡Saludos!
    – Tupi
    el 3 jul. 2021 a las 15:49
  • 2
    Puedes escribir tu propia respuesta, pero asegúrate de explicar bien el problema y la solución al mismo. Por cierto, intenta usar declaraciones de variables con let y const, en vez de var. Saludos el 3 jul. 2021 a las 15:52
  • Muchas gracias. ¿Puedo preguntar por qué var no está bien? ¡Saludos!
    – Tupi
    el 3 jul. 2021 a las 15:54
  • 1
    Puedes leer este post sobre var, let y const. No se trata de que esté bien o mal, se trata de que es preferible usar let y const. Saludos el 3 jul. 2021 a las 16:04

0

Tu Respuesta

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

Examina otras preguntas con la etiqueta o formula tu propia pregunta.