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