When I try to do ParentNode.children, says Cannot read property 'children' of undefined. Trying to get all the children of the parentnode to be have a background color of pink. Right now, I have a table with half hour increments, and depending on the time from 8 am to 8 pm, it will highlight the time, but I want that whole row to be highlighted.
let today = new Date();
var n = today.getHours();
var x = today.getMinutes();
if (x <= 29) {
x = "00";
}
if (x >= 30) {
x = "30";
}
if (n >= 12) {
z = "PM";
} else {
z = "AM";
}
var todayyy = n + ":" + x + z;
console.log(todayyy);
var datte = document.getElementById(todayyy).ParentNode.children;
datte.style.backgroundColor = "pink";
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>December</title>
<meta charset="utf-8">
<style>
</style>
</head>
<body>
<table class="tg">
<tr>
<th class="time">time</th>
<th class="sun" id="sunday">sun</th>
<th class="mon" id="monday">mon</th>
<th class="tue" id="tuesday">tue</th>
<th class="wed" id="wensday">wed</th>
<th class="thu" id="thursday">thu</th>
<th class="fri" id="friday">fri</th>
<th class="sat" id="saturday">sat</th>
</tr>
<tr>
<td class="date" id="8:00AM">8:00 AM</td>
<td class="sun"></td>
<td class="mon"></td>
<td class="tue"></td>
<td class="wed"></td>
<td class="thu"></td>
<td class="fri"></td>
<td class="sat"></td>
</tr>
<tr>
<td class="date" id="8:30AM">8:30 AM</td>
<td class="sun"></td>
<td class="mon"></td>
<td class="tue"></td>
<td class="wed"></td>
<td class="thu"></td>
<td class="fri"></td>
<td class="sat"></td>
</tr>
<tr>
<td class="date" id="9:00AM">9:00 AM</td>
<td class="sun"></td>
<td class="mon"></td>
<td class="tue"></td>
<td class="wed"></td>
<td class="thu"></td>
<td class="fri"></td>
<td class="sat"></td>
</tr>
<tr>
<td class="date" id="9:30AM">9:30 AM</td>
<td class="sun"></td>
<td class="mon"></td>
<td class="tue"></td>
<td class="wed"></td>
<td class="thu"></td>
<td class="fri"></td>
<td class="sat"></td>
</tr>
<tr>
<td class="date" id="10:00AM">10:00 AM</td>
<td class="sun"></td>
<td class="mon"></td>
<td class="tue"></td>
<td class="wed"></td>
<td class="thu"></td>
<td class="fri"></td>
<td class="sat"></td>
</tr>
<tr>
<td class="date" id="10:30AM">10:30 AM</td>
<td class="sun"></td>
<td class="mon"></td>
<td class="tue"></td>
<td class="wed"></td>
<td class="thu"></td>
<td class="fri"></td>
<td class="sat"></td>
</tr>
<tr>
<td class="date" id="11:00AM">11:00 AM</td>
<td class="sun"></td>
<td class="mon"></td>
<td class="tue"></td>
<td class="wed"></td>
<td class="thu"></td>
<td class="fri"></td>
<td class="sat"></td>
</tr>
<tr>
<td class="date" id="11:30AM">11:30 AM</td>
<td class="sun"></td>
<td class="mon"></td>
<td class="tue"></td>
<td class="wed"></td>
<td class="thu"></td>
<td class="fri"></td>
<td class="sat"></td>
</tr>
<tr>
<td class="date" id="12:00PM">12:00 PM</td>
<td class="sun"></td>
<td class="mon"></td>
<td class="tue"></td>
<td class="wed"></td>
<td class="thu"></td>
<td class="fri"></td>
<td class="sat"></td>
</tr>
<tr>
<td class="date" id="12:30PM">12:30 PM</td>
<td class="sun"></td>
<td class="mon"></td>
<td class="tue"></td>
<td class="wed"></td>
<td class="thu"></td>
<td class="fri"></td>
<td class="sat"></td>
</tr>
<tr>
<td class="date" id="13:00PM">1:00 PM</td>
<td class="sun"></td>
<td class="mon"></td>
<td class="tue"></td>
<td class="wed"></td>
<td class="thu"></td>
<td class="fri"></td>
<td class="sat"></td>
</tr>
<tr>
<td class="date" id="13:30PM">1:30 PM</td>
<td class="sun"></td>
<td class="mon"></td>
<td class="tue"></td>
<td class="wed"></td>
<td class="thu"></td>
<td class="fri"></td>
<td class="sat"></td>
</tr>
<tr>
<td class="date" id="14:00PM">2:00 PM</td>
<td class="sun"></td>
<td class="mon"></td>
<td class="tue"></td>
<td class="wed"></td>
<td class="thu"></td>
<td class="fri"></td>
<td class="sat"></td>
</tr>
<tr>
<td class="date" id="14:30PM">2:30 PM</td>
<td class="sun"></td>
<td class="mon"></td>
<td class="tue"></td>
<td class="wed"></td>
<td class="thu"></td>
<td class="fri"></td>
<td class="sat"></td>
</tr>
<tr>
<td class="date" id="15:00PM">3:00 PM</td>
<td class="sun"></td>
<td class="mon"></td>
<td class="tue"></td>
<td class="wed"></td>
<td class="thu"></td>
<td class="fri"></td>
<td class="sat"></td>
</tr>
<tr>
<td class="date" id="15:30PM">3:30 PM</td>
<td class="sun"></td>
<td class="mon"></td>
<td class="tue"></td>
<td class="wed"></td>
<td class="thu"></td>
<td class="fri"></td>
<td class="sat"></td>
</tr>
<tr>
<td class="date" id="16:00PM">4:00 PM</td>
<td class="sun"></td>
<td class="mon"></td>
<td class="tue"></td>
<td class="wed"></td>
<td class="thu"></td>
<td class="fri"></td>
<td class="sat"></td>
</tr>
<tr>
<td class="date" id="16:30PM">4:30 PM</td>
<td class="sun"></td>
<td class="mon"></td>
<td class="tue"></td>
<td class="wed"></td>
<td class="thu"></td>
<td class="fri"></td>
<td class="sat"></td>
</tr>
<tr>
<td class="date" id="17:00PM">5:00 PM</td>
<td class="sun"></td>
<td class="mon"></td>
<td class="tue"></td>
<td class="wed"></td>
<td class="thu"></td>
<td class="fri"></td>
<td class="sat"></td>
</tr>
<tr>
<td class="date" id="17:30PM">5:30 PM</td>
<td class="sun"></td>
<td class="mon"></td>
<td class="tue"></td>
<td class="wed"></td>
<td class="thu"></td>
<td class="fri"></td>
<td class="sat"></td>
</tr>
<tr>
<td class="date" id="18:00PM">6:00 PM</td>
<td class="sun"></td>
<td class="mon"></td>
<td class="tue"></td>
<td class="wed"></td>
<td class="thu"></td>
<td class="fri"></td>
<td class="sat"></td>
</tr>
<tr>
<td class="date" id="18:30PM">6:30 PM</td>
<td class="sun"></td>
<td class="mon"></td>
<td class="tue"></td>
<td class="wed"></td>
<td class="thu"></td>
<td class="fri"></td>
<td class="sat"></td>
</tr>
<tr>
<td class="date" id="19:00PM">7:00 PM</td>
<td class="sun"></td>
<td class="mon"></td>
<td class="tue"></td>
<td class="wed"></td>
<td class="thu"></td>
<td class="fri"></td>
<td class="sat"></td>
</tr>
<tr>
<td class="date" id="19:30PM">7:30 PM</td>
<td class="sun"></td>
<td class="mon"></td>
<td class="tue"></td>
<td class="wed"></td>
<td class="thu"></td>
<td class="fri"></td>
<td class="sat"></td>
</tr>
<tr>
<td class="date" id="20:00PM">8:00 PM</td>
<td class="sun"></td>
<td class="mon"></td>
<td class="tue"></td>
<td class="wed"></td>
<td class="thu"></td>
<td class="fri"></td>
<td class="sat"></td>
</tr>
</table>