Entonces, para hacer un poco de historia primero, estoy estudiando javascript en un curso en línea gratuito porque pensé que saber cómo codificar sería genial y útil en el futuro. Actualmente realicé el 55% del curso y pensé en aplicar lo que aprendí hasta ahora para crear una nueva extensión de pestaña. Mi idea es que el texto cambie dependiendo del tiempo, después de investigar aprendí sobre el objeto de fecha, luego después de una hora, el código en el fragmento de código es el resultado final... Morning' no cambió después de que el reloj marcara las 12, intenté usar diferentes operadores y bucles, pero el resultado es el mismo o un error. Lo siento si esta es una pregunta estúpida, pero ¿cómo hago para que el texto cambie de "Buenos días" a "Buenas tardes" cuando llegue a las 12 y "Buenas noches" cuando llegue a las 7:00/19?
function getDateTime() { let date = new Date(); let hour = date.getHours(); if (hour >= 6) { document.getElementById('d').innerHTML = "Good Morning"; } else if (hour >= 12) { document.getElementById('d').innerHTML = "Good Afternoon"; } else if (hour >= 19) { document.getElementById('d').innerHTML = "Good Evening"; } else if (hour >= 0) { document.getElementById('d').innerHTML = "Go to sleep soon"; } else if (hour >= 2) { document.getElementById('d').innerHTML = "You should consider going to sleep"; } else if (hour >= 3) { document.getElementById('d').innerHTML = "GO. TO. SLEEP."; } else { document.getElementById('d').innerHTML = "If you see this, something is wrong with the code"; } } getDateTime() h1 { text-align: center; position: relative; font-size: 50px; } <h1 id="d"> </h1>Cuando tenga una serie de condiciones if/else if , se utilizará la primera condición que se cumpla.
Cuando es después de las 12, también es después de las 6, por lo que la condición hour >= 6 será verdadera, y ese es el resultado que obtendrá. Nunca comprobará la hour >= 12 porque ya se ha cumplido una condición.
Por lo tanto, debe ordenar sus condiciones en orden de especificidad. En este caso, eso significa en orden decreciente de horas.
function getDateTime() { let date = new Date(); let hour = date.getHours(); if (hour >= 19) { document.getElementById('d').innerHTML = "Good Evening"; } else if (hour >= 12) { document.getElementById('d').innerHTML = "Good Afternoon"; } else if (hour >= 6) { document.getElementById('d').innerHTML = "Good Morning"; } else if (hour >= 3) { document.getElementById('d').innerHTML = "GO. TO. SLEEP."; } else if (hour >= 2) { document.getElementById('d').innerHTML = "You should consider going to sleep"; } else if (hour >= 0) { document.getElementById('d').innerHTML = "Go to sleep soon"; } else { document.getElementById('d').innerHTML = "If you see this, something is wrong with the code"; } } getDateTime() h1 { text-align: center; position: relative; font-size: 50px; } <h1 id="d"> </h1>Vea su primera declaración if :
if (hour >= 6) { ... } Si la hora es las 11 p. m. (o las 23:00 para el horario de 24 h)... ¿no es eso también >= 6 ?
Debe ordenar los condicionales para que las declaraciones no se "superpongan" entre sí.
De lo contrario, el código es bueno, ¡diviértete aprendiendo JavaScript!
al verificar si un número es >= algo, tenga en cuenta que siempre debe verificar el número más alto PRIMERO y luego trabajar desde allí. en su ejemplo, si el número es 14, activará la primera condición (14 >= 6)
if (hour >= 6) { document.getElementById('d').innerHTML = "Good Morning"; } else if (hour >= 12) { document.getElementById('d').innerHTML = "Good Afternoon"; }en su lugar, debería escribirse así:
if (hour >= 12) { document.getElementById('d').innerHTML = "Good Morning"; } else if (hour >= 6) { document.getElementById('d').innerHTML = "Good Afternoon"; }y continuar desde allí.