Estoy trabajando en una tabla general que destaca el día actual de la semana. Funcionó todos los días excepto el domingo, hoy. Ahora está roto y devuelve el siguiente error:
¿Aparentemente el código no es robusto en absoluto? ¿Debería haber una forma completamente diferente de escribir esto? PD. la declaración if es para evitar que el código se active para todas las páginas que no contienen dicha tabla de trabajo.
https://jsfiddle.net/mxopg6fz/
workday(); function workday(){ if (document.getElementById("weekdagtabel") !== null){ var d = new Date().getDay(); document.getElementById("day-"+d).classList.add("today"); } } .today { font-weight: bold; } .open { background-color: green; } .closed { background-color: red; } table { border-collapse: collapse; width: 100%; border-spacing: 0; margin: .5em 0; } th, td { padding: 1em; text-align: left; border-bottom: 1px solid #ddd; border-color:black; border-style:solid; border-width:1px; overflow:hidden; word-break:normal; } tr:hover {background-color: #EEE} <table> <tbody id="weekdagtabel"> <tr id="day-1"> <td>Monday</td> <td>08:00 - 20:00</td> </tr> <tr id="day-2"> <td>Tuesday</td> <td>08:00 - 20:00</td> </tr> <tr id="day-3"> <td>Wednesday</td> <td>08:00 - 20:00</td> </tr> <tr id="day-4"> <td>Thursday</td> <td>08:00 - 20:00</td> </tr> <tr id="day-5"> <td>Friday</td> <td>08:00 - 20:00</td> </tr> <tr id="day-6"> <td>Saturday</td> <td>Closed</td> </tr> <tr id="day-7"> <td>Sunday</td> <td>Closed</td> </tr> </tbody> </table>Revisa esta línea de código:
var d = new Date().getDay(); La variable d obtiene valores de 0 a 6 ( 0 para el domingo, 1 para el lunes, etc.)
pero tiene identificadores del 1 al 7 en su html ( day-1 ... day-7 )
Para el domingo, su código está buscando id day-0 aquí:
document.getElementById("day-"+d) pero no está presente en su html, tiene day-7 en su lugar
Use la identificación day-0 para el domingo en lugar del day-7 , o ajuste su variable d en su código, para reflejar las identificaciones existentes en su archivo html.