Estoy haciendo una declaración if que se ejecuta usando variables basadas en la función Date(), pero la declaración if no parece evitar la ejecución cuando debería. El bloque de código está destinado a revelar uno entre un conjunto de posibles párrafos cuando sea el momento adecuado. Aquí está mi guión
<script> const D = new Date(); var m = D.getMinutes(); var h = D.getHours(); function showMessage() { if ((0 < h <= 5) || ((h == 6) && (m == 0))) { document.getElementById("m1").classList.remove("message"); } else if (((6 == h) && (m != 0)) || (6 < h < 12) || ((h == 12) && (m == 0))) { document.getElementById("m2").classList.remove("message"); } else if (((12 == h) && (m != 0)) || (12 < h < 18) || ((h == 18) && (m == 0))) { document.getElementById("m3").classList.remove("message"); } else { document.getElementById("m4").classList.remove("message"); } } showMessage(); </script>Aquí está el bloque HTML relevante:
<div id="messagecontainer"> <p class="message" id="m1">Good morning, you must be an early bird!</p> <p class="message" id="m2">Good morning</p> <p class="message" id="m3">Good afternoon</p> <p class="message" id="m4">Good evening</p> </div>Y aquí está el CSS que lo hace funcionar:
.message { display: none; }Como puede ver, cuando se elimina la clase "mensaje" de cualquier párrafo, el párrafo debe revelarse. Sé que esta parte funciona, pero el problema es que siempre revela el párrafo id="m1" cuando no debería. Solo debería ejecutarse desde la 1 a. m. (este es un error que acabo de notar y que corregiré) hasta las 6 p. m. De lo contrario, debe ir a tantas otras declaraciones if como sea necesario hasta que sea el momento adecuado y se ejecute el bloque de texto correcto. Por ejemplo, ahora son las 3:30 p. m. (15:30 m) y, por lo tanto, debería mostrarse el tercer bloque con el párrafo "m3". Pero sigue siendo el "m1".
Lo único en lo que puedo pensar es que de alguna manera arruiné la sintaxis en las declaraciones if o, de lo contrario, el alcance de la variable no me permite acceder a las variables dentro de las declaraciones if (creo que deberían ser globales, pero podría estar equivocado). ¿Alguien puede ver el problema?
Esto no hace lo que crees que hace:
(0 < h <= 5)Esto evaluará primero una de las condiciones, luego usará el resultado de esa condición para evaluar la segunda. Así que esencialmente estás haciendo esto:
(false <= 5) Lo cual sería true .
Separe las condiciones lógicas explícitamente:
((0 < h) && (h <= 5))Está escribiendo algunas condiciones que no funcionan como se esperaba (funcionan en notación matemática, pero no al escribir código).
Tome esto por ejemplo 0 < h <= 5 . Se ejecutará en pasos.
0 < 5 . Esto puede ser true o falsetrue < 5 o false < 5 , los cuales terminarán siendo evaluados como true . Esto se debe a cómo JS convierte algunos valores al realizar operaciones booleanas o matemáticas. Necesitas dividir todo esto en algo como esto 0 < h && h <= 5
La primera declaración if siempre resultará true
(0 < h <= 5) es igual a ((0 < h) <= 5) y puedes comprobar que siempre será cierto
En JavaScript, para verificar si un número está entre dos números (lo que en matemáticas regulares sería n1 < x < n2), debe usar el operador &&
(0 < h) && (h <= 5)asi que:
(0 < h <= 5) || ((h == 6) && (m == 0)) es igual a
((0 < h) <= 5) || ((h == 6) && (m == 0)) que no es lo que pretendía porque los dos primeros paréntesis siempre darán como resultado un valor verdadero.
Lo que quieres es que: ((0 < h) && (h <= 5)) || ((h == 6) && (m == 0))