I'm trying to make it so based off of the user's input for the option the user selects and enters, the cell that fits both the inputted time and date is highlighted.
Right now, I'm trying to do it so it takes the text of the option for a day of the week, and uses that text to search up <td> elements with the class that has that text, and set it to the variable cell. Then, I set a variable for the element that contains the same id as the text of the option for the time, and then get the parent node of that element and its children. Of the children, it searches for the <td> element that's also in the variable cell.
<!DOCTYPE html>
<html lang="en-us">
<head>
<title>calendar</title>
<meta charset="UTF-8">
<style>
</style>
</head>
<body>
<p>Enter information for your appointments below</p>
<form>
<select id="dayweek">
<option>Sunday</option>
<option>Monday</option>
<option>Tuesday</option>
<option>Wensday</option>
<option>Thursday</option>
<option>Friday</option>
<option>Saturday</option>
</select>
<p>Select day of week</p>
<select id="thetime">
<option>8:00 AM</option>
<option>8:30 AM</option>
<option>9:00 AM</option>
<option>9:30 AM</option>
<option>10:00 AM</option>
<option>10:30 AM</option>
<option>11:00 AM</option>
<option>11:30 AM</option>
<option>12:00 PM</option>
<option>12:30 PM</option>
<option>1:00 PM</option>
<option>13:00 PM</option>
<option>13:30 PM</option>
<option>14:00 PM</option>
<option>14:30 PM</option>
<option>15:00 PM</option>
<option>15:30 PM</option>
<option>16:00 PM</option>
<option>16:30 PM</option>
<option>17:00 PM</option>
<option>17:30 PM</option>
<option>18:00 PM</option>
<option>18:30 PM</option>
<option>19:00 PM</option>
<option>19:30 PM</option>
<option>20:00 PM</option>
</select>
</form>
<button type="button" id="enterAppointments" onclick="enterAppointments()">Enter appointments</button>
<table class="tg">
<tr>
<th>time</th>
<th>sun</th>
<th>mon</th>
<th>tue</th>
<th>wed</th>
<th>thu</th>
<th>fri</th>
<th>sat</th>
</tr>
<tr>
<td id="8:00AM">8:00 AM</td>
<td class="Sunday"></td>
<td class="Monday"></td>
<td class="Tuesday"></td>
<td class="Wensday"></td>
<td class="Thursday"></td>
<td class="Friday"></td>
<td class="Saturday"></td>
</tr>
<tr>
<td id="8:30AM">8:30 AM</td>
<td class="Sunday"></td>
<td class="Monday"></td>
<td class="Tuesday"></td>
<td class="Wensday"></td>
<td class="Thursday"></td>
<td class="Friday"></td>
<td class="Saturday"></td>
</tr>
<tr>
<td id="9:00AM">9:00 AM</td>
<td class="Sunday"></td>
<td class="Monday"></td>
<td class="Tuesday"></td>
<td class="Wensday"></td>
<td class="Thursday"></td>
<td class="Friday"></td>
<td class="Saturday"></td>
</tr>
<tr>
<td id="9:30AM">9:30 AM</td>
<td class="Sunday"></td>
<td class="Monday"></td>
<td class="Tuesday"></td>
<td class="Wensday"></td>
<td class="Thursday"></td>
<td class="Friday"></td>
<td class="Saturday"></td>
</tr>
<tr>
<td id="10:00AM">10:00 AM</td>
<td class="Sunday"></td>
<td class="Monday"></td>
<td class="Tuesday"></td>
<td class="Wensday"></td>
<td class="Thursday"></td>
<td class="Friday"></td>
<td class="Saturday"></td>
</tr>
<tr>
<td id="10:30AM">10:30 AM</td>
<td class="Sunday"></td>
<td class="Monday"></td>
<td class="Tuesday"></td>
<td class="Wensday"></td>
<td class="Thursday"></td>
<td class="Friday"></td>
<td class="Saturday"></td>
</tr>
<tr>
<td id="11:00AM">11:00 AM</td>
<td class="Sunday"></td>
<td class="Monday"></td>
<td class="Tuesday"></td>
<td class="Wensday"></td>
<td class="Thursday"></td>
<td class="Friday"></td>
<td class="Saturday"></td>
</tr>
<tr>
<td id="11:30AM">11:30 AM</td>
<td class="Sunday"></td>
<td class="Monday"></td>
<td class="Tuesday"></td>
<td class="Wensday"></td>
<td class="Thursday"></td>
<td class="Friday"></td>
<td class="Saturday"></td>
</tr>
<tr>
<td id="12:00PM">12:00 PM</td>
<td class="Sunday"></td>
<td class="Monday"></td>
<td class="Tuesday"></td>
<td class="Wensday"></td>
<td class="Thursday"></td>
<td class="Friday"></td>
<td class="Saturday"></td>
</tr>
<tr>
<td id="12:30PM">12:30 PM</td>
<td class="Sunday"></td>
<td class="Monday"></td>
<td class="Tuesday"></td>
<td class="Wensday"></td>
<td class="Thursday"></td>
<td class="Friday"></td>
<td class="Saturday"></td>
</tr>
<tr>
<td id="13:00PM">1:00 PM</td>
<td class="Sunday"></td>
<td class="Monday"></td>
<td class="Tuesday"></td>
<td class="Wensday"></td>
<td class="Thursday"></td>
<td class="Friday"></td>
<td class="Saturday"></td>
</tr>
<tr>
<td id="13:30PM">1:30 PM</td>
<td class="Sunday"></td>
<td class="Monday"></td>
<td class="Tuesday"></td>
<td class="Wensday"></td>
<td class="Thursday"></td>
<td class="Friday"></td>
<td class="Saturday"></td>
</tr>
<tr>
<td id="14:00PM">2:00 PM</td>
<td class="Sunday"></td>
<td class="Monday"></td>
<td class="Tuesday"></td>
<td class="Wensday"></td>
<td class="Thursday"></td>
<td class="Friday"></td>
<td class="Saturday"></td>
</tr>
<tr>
<td id="14:30PM">2:30 PM</td>
<td class="Sunday"></td>
<td class="Monday"></td>
<td class="Tuesday"></td>
<td class="Wensday"></td>
<td class="Thursday"></td>
<td class="Friday"></td>
<td class="Saturday"></td>
</tr>
<tr>
<td id="15:00PM">3:00 PM</td>
<td class="Sunday"></td>
<td class="Monday"></td>
<td class="Tuesday"></td>
<td class="Wensday"></td>
<td class="Thursday"></td>
<td class="Friday"></td>
<td class="Saturday"></td>
</tr>
<tr>
<td id="15:30PM">3:30 PM</td>
<td class="Sunday"></td>
<td class="Monday"></td>
<td class="Tuesday"></td>
<td class="Wensday"></td>
<td class="Thursday"></td>
<td class="Friday"></td>
<td class="Saturday"></td>
</tr>
<tr>
<td id="16:00PM">4:00 PM</td>
<td class="Sunday"></td>
<td class="Monday"></td>
<td class="Tuesday"></td>
<td class="Wensday"></td>
<td class="Thursday"></td>
<td class="Friday"></td>
<td class="Saturday"></td>
</tr>
<tr>
<td id="16:30PM">4:30 PM</td>
<td class="Sunday"></td>
<td class="Monday"></td>
<td class="Tuesday"></td>
<td class="Wensday"></td>
<td class="Thursday"></td>
<td class="Friday"></td>
<td class="Saturday"></td>
</tr>
<tr>
<td id="17:00PM">5:00 PM</td>
<td class="Sunday"></td>
<td class="Monday"></td>
<td class="Tuesday"></td>
<td class="Wensday"></td>
<td class="Thursday"></td>
<td class="Friday"></td>
<td class="Saturday"></td>
</tr>
<tr>
<td id="17:30PM">5:30 PM</td>
<td class="Sunday"></td>
<td class="Monday"></td>
<td class="Tuesday"></td>
<td class="Wensday"></td>
<td class="Thursday"></td>
<td class="Friday"></td>
<td class="Saturday"></td>
</tr>
<tr>
<td id="18:00PM">6:00 PM</td>
<td class="Sunday"></td>
<td class="Monday"></td>
<td class="Tuesday"></td>
<td class="Wensday"></td>
<td class="Thursday"></td>
<td class="Friday"></td>
<td class="Saturday"></td>
</tr>
<tr>
<td id="18:30PM">6:30 PM</td>
<td class="Sunday"></td>
<td class="Monday"></td>
<td class="Tuesday"></td>
<td class="Wensday"></td>
<td class="Thursday"></td>
<td class="Friday"></td>
<td class="Saturday"></td>
</tr>
<tr>
<td id="19:00PM">7:00 PM</td>
<td class="Sunday"></td>
<td class="Monday"></td>
<td class="Tuesday"></td>
<td class="Wensday"></td>
<td class="Thursday"></td>
<td class="Friday"></td>
<td class="Saturday"></td>
</tr>
<tr>
<td id="19:30PM">7:30 PM</td>
<td class="Sunday"></td>
<td class="Monday"></td>
<td class="Tuesday"></td>
<td class="Wensday"></td>
<td class="Thursday"></td>
<td class="Friday"></td>
<td class="Saturday"></td>
</tr>
<tr>
<td id="20:00PM">8:00 PM</td>
<td class="Sunday"></td>
<td class="Monday"></td>
<td class="Tuesday"></td>
<td class="Wensday"></td>
<td class="Thursday"></td>
<td class="Friday"></td>
<td class="Saturday"></td>
</tr>
</table>
<script>
var x = document.getElementById("dayweek");
var z = document.getElementById("thetime");
var i = x.selectedIndex;
var a = z.selectedIndex;
function enterAppointments() {
var classy = x.options[i].text
var timeoption = z.options[a].text
var timeoption1 = document.getElementById(timeoption).parentNode.children;
var cell = document.querySelectorAll('table td.classy ');
var cells;
for (var i = 0; i < cell.length; i++) {
var cells = cell[i]
timeoption1[cells].style.color = 'red';
}
}
</script>
</body>
</html>
Get the selectedTime, then get all the td's which are first child of tr, match the textContent with selectedTime. If matches, apply style to time td and then get the parentElement of it, get all its children and match the className or textContent with the selectedDay.
function enterAppointments() {
/** Remove previously selected styles */
document.querySelectorAll('td[style]').forEach(td => td.style.color = '');
const selectedTime = document.querySelector('#thetime').value;
const selectedDay = document.querySelector('#dayweek').value;
const timeTds = document.querySelectorAll('td:first-child');
[...timeTds].forEach(td => {
if(td.textContent === selectedTime) {
td.style.color = "blue";
[...td.parentElement.children].forEach(td => {
if(td.className == selectedDay) {
td.style.color = "yellow";
}
});
}
});
}<p>Enter information for your appointments below</p>
<form>
<select id="dayweek">
<option>Sunday</Sundayoption>
<option>Monday</Mondayoption>
<option>Tuesday</Tuesdayoption>
<option>Wensday</Wensdayoption>
<option>Thursday</Thursdayoption>
<option>Friday</Fridayoption>
<option>Saturday</Saturdayoption>
</select>
<p>Select day of week</p>
<select id="thetime">
<option>8:00 AM</option>
<option>8:30 AM</option>
<option>9:00 AM</option>
<option>9:30 AM</option>
<option>10:00 AM</option>
<option>10:30 AM</option>
<option>11:00 AM</option>
<option>11:30 AM</option>
<option>12:00 PM</option>
<option>12:30 PM</option>
<option>1:00 PM</option>
<option>13:00 PM</option>
<option>13:30 PM</option>
<option>14:00 PM</option>
<option>14:30 PM</option>
<option>15:00 PM</option>
<option>15:30 PM</option>
<option>16:00 PM</option>
<option>16:30 PM</option>
<option>17:00 PM</option>
<option>17:30 PM</option>
<option>18:00 PM</option>
<option>18:30 PM</option>
<option>19:00 PM</option>
<option>19:30 PM</option>
<option>20:00 PM</option>
</select>
</form>
<button type="button" id="enterAppointments" onclick="enterAppointments()">Enter appointments</button>
<table class="tg">
<tr>
<th>time</th>
<th>sun</th>
<th>mon</th>
<th>tue</th>
<th>wed</th>
<th>thu</th>
<th>fri</th>
<th>sat</th>
</tr>
<tr>
<td id="8:00AM">8:00 AM</td>
<td class="Sunday">Sunday</td>
<td class="Monday">Monday</td>
<td class="Tuesday">Tuesday</td>
<td class="Wensday">Wensday</td>
<td class="Thursday">Thursday</td>
<td class="Friday">Friday</td>
<td class="Saturday">Saturday</td>
</tr>
<tr>
<td id="8:30AM">8:30 AM</td>
<td class="Sunday">Sunday</td>
<td class="Monday">Monday</td>
<td class="Tuesday">Tuesday</td>
<td class="Wensday">Wensday</td>
<td class="Thursday">Thursday</td>
<td class="Friday">Friday</td>
<td class="Saturday">Saturday</td>
</tr>
<tr>
<td id="9:00AM">9:00 AM</td>
<td class="Sunday">Sunday</td>
<td class="Monday">Monday</td>
<td class="Tuesday">Tuesday</td>
<td class="Wensday">Wensday</td>
<td class="Thursday">Thursday</td>
<td class="Friday">Friday</td>
<td class="Saturday">Saturday</td>
</tr>
<tr>
<td id="9:30AM">9:30 AM</td>
<td class="Sunday">Sunday</td>
<td class="Monday">Monday</td>
<td class="Tuesday">Tuesday</td>
<td class="Wensday">Wensday</td>
<td class="Thursday">Thursday</td>
<td class="Friday">Friday</td>
<td class="Saturday">Saturday</td>
</tr>
<tr>
<td id="10:00AM">10:00 AM</td>
<td class="Sunday">Sunday</td>
<td class="Monday">Monday</td>
<td class="Tuesday">Tuesday</td>
<td class="Wensday">Wensday</td>
<td class="Thursday">Thursday</td>
<td class="Friday">Friday</td>
<td class="Saturday">Saturday</td>
</tr>
<tr>
<td id="10:30AM">10:30 AM</td>
<td class="Sunday">Sunday</td>
<td class="Monday">Monday</td>
<td class="Tuesday">Tuesday</td>
<td class="Wensday">Wensday</td>
<td class="Thursday">Thursday</td>
<td class="Friday">Friday</td>
<td class="Saturday">Saturday</td>
</tr>
<tr>
<td id="11:00AM">11:00 AM</td>
<td class="Sunday">Sunday</td>
<td class="Monday">Monday</td>
<td class="Tuesday">Tuesday</td>
<td class="Wensday">Wensday</td>
<td class="Thursday">Thursday</td>
<td class="Friday">Friday</td>
<td class="Saturday">Saturday</td>
</tr>
<tr>
<td id="11:30AM">11:30 AM</td>
<td class="Sunday">Sunday</td>
<td class="Monday">Monday</td>
<td class="Tuesday">Tuesday</td>
<td class="Wensday">Wensday</td>
<td class="Thursday">Thursday</td>
<td class="Friday">Friday</td>
<td class="Saturday">Saturday</td>
</tr>
<tr>
<td id="12:00PM">12:00 PM</td>
<td class="Sunday">Sunday</td>
<td class="Monday">Monday</td>
<td class="Tuesday">Tuesday</td>
<td class="Wensday">Wensday</td>
<td class="Thursday">Thursday</td>
<td class="Friday">Friday</td>
<td class="Saturday">Saturday</td>
</tr>
<tr>
<td id="12:30PM">12:30 PM</td>
<td class="Sunday">Sunday</td>
<td class="Monday">Monday</td>
<td class="Tuesday">Tuesday</td>
<td class="Wensday">Wensday</td>
<td class="Thursday">Thursday</td>
<td class="Friday">Friday</td>
<td class="Saturday">Saturday</td>
</tr>
<tr>
<td id="13:00PM">1:00 PM</td>
<td class="Sunday">Sunday</td>
<td class="Monday">Monday</td>
<td class="Tuesday">Tuesday</td>
<td class="Wensday">Wensday</td>
<td class="Thursday">Thursday</td>
<td class="Friday">Friday</td>
<td class="Saturday">Saturday</td>
</tr>
<tr>
<td id="13:30PM">1:30 PM</td>
<td class="Sunday">Sunday</td>
<td class="Monday">Monday</td>
<td class="Tuesday">Tuesday</td>
<td class="Wensday">Wensday</td>
<td class="Thursday">Thursday</td>
<td class="Friday">Friday</td>
<td class="Saturday">Saturday</td>
</tr>
<tr>
<td id="14:00PM">2:00 PM</td>
<td class="Sunday">Sunday</td>
<td class="Monday">Monday</td>
<td class="Tuesday">Tuesday</td>
<td class="Wensday">Wensday</td>
<td class="Thursday">Thursday</td>
<td class="Friday">Friday</td>
<td class="Saturday">Saturday</td>
</tr>
<tr>
<td id="14:30PM">2:30 PM</td>
<td class="Sunday">Sunday</td>
<td class="Monday">Monday</td>
<td class="Tuesday">Tuesday</td>
<td class="Wensday">Wensday</td>
<td class="Thursday">Thursday</td>
<td class="Friday">Friday</td>
<td class="Saturday">Saturday</td>
</tr>
<tr>
<td id="15:00PM">3:00 PM</td>
<td class="Sunday">Sunday</td>
<td class="Monday">Monday</td>
<td class="Tuesday">Tuesday</td>
<td class="Wensday">Wensday</td>
<td class="Thursday">Thursday</td>
<td class="Friday">Friday</td>
<td class="Saturday">Saturday</td>
</tr>
<tr>
<td id="15:30PM">3:30 PM</td>
<td class="Sunday">Sunday</td>
<td class="Monday">Monday</td>
<td class="Tuesday">Tuesday</td>
<td class="Wensday">Wensday</td>
<td class="Thursday">Thursday</td>
<td class="Friday">Friday</td>
<td class="Saturday">Saturday</td>
</tr>
<tr>
<td id="16:00PM">4:00 PM</td>
<td class="Sunday">Sunday</td>
<td class="Monday">Monday</td>
<td class="Tuesday">Tuesday</td>
<td class="Wensday">Wensday</td>
<td class="Thursday">Thursday</td>
<td class="Friday">Friday</td>
<td class="Saturday">Saturday</td>
</tr>
<tr>
<td id="16:30PM">4:30 PM</td>
<td class="Sunday">Sunday</td>
<td class="Monday">Monday</td>
<td class="Tuesday">Tuesday</td>
<td class="Wensday">Wensday</td>
<td class="Thursday">Thursday</td>
<td class="Friday">Friday</td>
<td class="Saturday">Saturday</td>
</tr>
<tr>
<td id="17:00PM">5:00 PM</td>
<td class="Sunday">Sunday</td>
<td class="Monday">Monday</td>
<td class="Tuesday">Tuesday</td>
<td class="Wensday">Wensday</td>
<td class="Thursday">Thursday</td>
<td class="Friday">Friday</td>
<td class="Saturday">Saturday</td>
</tr>
<tr>
<td id="17:30PM">5:30 PM</td>
<td class="Sunday">Sunday</td>
<td class="Monday">Monday</td>
<td class="Tuesday">Tuesday</td>
<td class="Wensday">Wensday</td>
<td class="Thursday">Thursday</td>
<td class="Friday">Friday</td>
<td class="Saturday">Saturday</td>
</tr>
<tr>
<td id="18:00PM">6:00 PM</td>
<td class="Sunday">Sunday</td>
<td class="Monday">Monday</td>
<td class="Tuesday">Tuesday</td>
<td class="Wensday">Wensday</td>
<td class="Thursday">Thursday</td>
<td class="Friday">Friday</td>
<td class="Saturday">Saturday</td>
</tr>
<tr>
<td id="18:30PM">6:30 PM</td>
<td class="Sunday">Sunday</td>
<td class="Monday">Monday</td>
<td class="Tuesday">Tuesday</td>
<td class="Wensday">Wensday</td>
<td class="Thursday">Thursday</td>
<td class="Friday">Friday</td>
<td class="Saturday">Saturday</td>
</tr>
<tr>
<td id="19:00PM">7:00 PM</td>
<td class="Sunday">Sunday</td>
<td class="Monday">Monday</td>
<td class="Tuesday">Tuesday</td>
<td class="Wensday">Wensday</td>
<td class="Thursday">Thursday</td>
<td class="Friday">Friday</td>
<td class="Saturday">Saturday</td>
</tr>
<tr>
<td id="19:30PM">7:30 PM</td>
<td class="Sunday">Sunday</td>
<td class="Monday">Monday</td>
<td class="Tuesday">Tuesday</td>
<td class="Wensday">Wensday</td>
<td class="Thursday">Thursday</td>
<td class="Friday">Friday</td>
<td class="Saturday">Saturday</td>
</tr>
<tr>
<td id="20:00PM">8:00 PM</td>
<td class="Sunday">Sunday</td>
<td class="Monday">Monday</td>
<td class="Tuesday">Tuesday</td>
<td class="Wensday">Wensday</td>
<td class="Thursday">Thursday</td>
<td class="Friday">Friday</td>
<td class="Saturday">Saturday</td>
</tr>
</table>