0

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>
Kai
  • 47
  • 7

2 Answers2

1

A few things here:

  • You are looking to use parentNode (lowercase parent) not ParentNode
  • Are the table rows auto-generated or will always stop at 8PM? Because right now it is within 21:00 Eastern Time (9PM) so there is no row and that will result in a null.
  • The row is a collection of table cells (td), so you need to iterate over them to apply the style attribute to each cell individually.

I modified your code slightly by hard-coding the time as 1600 hours, and then applying the style for each cell. Does this give you the desired result?

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;
todayyy = '16:00PM';  // TESTING!!!
console.log(todayyy);

var datte = document.getElementById(todayyy).parentNode.children;
console.log(datte);

// iterate over each table cell in the row to apply style
for (var i = 0; i < datte.length; i++) {
  datte[i].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>
chrisbyte
  • 1,061
  • 1
  • 8
  • 14
  • Thank you so much that does everything I needed it to do. – Kai Dec 17 '19 at 02:29
  • If this is a working solution that fits your needs, consider giving the lad an upvote and marking his answer as "accepted." It gives him some points as a reward and lets others know that this is the solution you're happiest with. – Aaron Plocharczyk Dec 17 '19 at 02:41
0

The first character of .parentNode should be lowercase. Also, you can omit the .children, as the parentNode will get you the whole <tr> row you are trying to highlight. Selecting the children would mean you would have to loop through each node individually.

https://developer.mozilla.org/en-US/docs/Web/API/ParentNode/children#Example

This is the altered line of code:

var datte = document.getElementById(todayyy).parentNode;

Also, keep in mind that html id attributes should begin with letters [a-zA-Z]. What are valid values for the id attribute in HTML?

chris
  • 754
  • 4
  • 15