I'm working on creating a calendar that displays 3 booking times when a user clicks on a specific day. However, I am facing an issue where the styling (green color) remains on the selected day even if the user chooses a different day. Any assistance on how to resolve this would be much appreciated.
HTML:
<body onLoad="getMonth()">
<div id="container">
<p id="month">MONTH</p>
<div id="fullDiv">
<ul class="days">
<li>SUN</li>
<li>MON</li>
<li>TUE</li>
<li>WED</li>
<li>THUR</li>
<li>FRI</li>
<li>SAT</li>
<li onclick="check(1);remStyle(event);">1</li>
<li onclick="check(2);remStyle(event);">2</li>
<li onclick="check(3);remStyle(event);">3</li>
<li onclick="check(4);remStyle(event);">4</li>
<li onclick="check(5);remStyle(event);">5</li>
...
</ul>
</div>
Javascript:
function check(value) {
day = value;
document.getElementById("bookingTimes").style.visibility = "visible";
var content = document.getElementsByTagName("li");
if (day == value) {
content[day + 6].style.backgroundColor = "#1abc9c";
content[day + 6].style.color = "#ecf0f1";
}
return day;
}