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. ^^

Tupi
  • 485
  • 3
  • 15
  • 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 – Mauricio Contreras Jul 03 '21 at 15:46
  • ¡Muchísimas gracias! Eso solucionó mi problema. ^^ Una cosa, ¿lo escribo como respuesta, o lo haces tú? ¡Saludos! – Tupi Jul 03 '21 at 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 – Mauricio Contreras Jul 03 '21 at 15:52
  • Muchas gracias. ¿Puedo preguntar por qué `var` no está bien? ¡Saludos! – Tupi Jul 03 '21 at 15:54
  • 1
    Puedes leer [este post sobre `var`, `let` y `const`](https://es.stackoverflow.com/questions/106042/var-let-const-o-nada-en-javascript). No se trata de que esté bien o mal, se trata de que es preferible usar `let` y `const`. Saludos – Mauricio Contreras Jul 03 '21 at 16:04
  • Muchas gracias, no tengo más dudas. Saludos. ^^ – Tupi Jul 03 '21 at 16:07

0 Answers0