i have created a page using html css and javascript. in this page i am showing like shift information for week.
i had options like 4AM 8AM 1PM 6PM and show all shifts.
when user click on all shifts it has to highlisht the allshift in that particular day but here i am facing issue like when i click on Monday all shifts it is highliting but after when i click on tuesday it highliting both Monday and Tuesday.
My requirement is when i click on particular day that one only has to higlight.
Please find my Code and images below.
<div class="row">
<div class="col-2"></div>
<div class="col-2">
<p>
Early shifts<br /><span class="text-primary"
>starting at 4AM +</span
>
</p>
</div>
<div class="col-2">
<p>
Day shifts<br /><span class="text-primary"
>starting at 8AM +</span
>
</p>
</div>
<div class="col-2">
<p>
Afternoon shifts<br /><span class="text-primary"
>starting at 1PM +</span
>
</p>
</div>
<div class="col-2">
<p>
Night shifts<br /><span class="text-primary"
>starting at 6PM +</span
>
</p>
</div>
<div class="col-2">
<p>
All day<br /><span class="text-primary"
>show me all shifts</span
>
</p>
</div>
</div>
<div class="row">
<div class="col-2">
<p>Mon</p>
</div>
<div class="col-2 text-center">
<i
class="bi bi-brightness-alt-low"
style="font-size: 2rem"
id="mon-4am"
></i>
</div>
<div class="col-2 text-center">
<i
class="bi bi-brightness-alt-high"
style="font-size: 2rem"
id="mon-8am"
></i>
</div>
<div class="col-2 text-center">
<i
class="bi bi-brightness-high"
style="font-size: 1.5rem"
id="mon-1pm"
></i>
</div>
<div class="col-2 text-center">
<i
class="bi bi-moon"
style="font-size: 1.35rem"
id="mon-6pm"
></i>
</div>
<div class="col-2 text-center">
<i
class="bi bi-arrow-clockwise"
style="font-size: 1.65rem"
id="mon"
onclick="changeBG(this.id)"
></i>
</div>
</div>
<div class="row">
<div class="col-2">
<p>Tue</p>
</div>
<div class="col-2 text-center">
<i
class="bi bi-brightness-alt-low"
style="font-size: 2rem"
id="tue-4am"
></i>
</div>
<div class="col-2 text-center">
<i
class="bi bi-brightness-alt-high"
style="font-size: 2rem"
id="tue-8am"
></i>
</div>
<div class="col-2 text-center">
<i
class="bi bi-brightness-high"
style="font-size: 1.5rem"
id="tue-1pm"
></i>
</div>
<div class="col-2 text-center">
<i
class="bi bi-moon"
style="font-size: 1.35rem"
id="tue-6pm"
></i>
</div>
<div class="col-2 text-center">
<i
class="bi bi-arrow-clockwise"
style="font-size: 1.65rem"
id="tue"
onclick="changeBG(this.id)"
></i>
</div>
</div>
<div class="row">
<div class="col-2">
<p>Wed</p>
</div>
<div class="col-2 text-center">
<i
class="bi bi-brightness-alt-low"
style="font-size: 2rem"
id="wed-4am"
></i>
</div>
<div class="col-2 text-center">
<i
class="bi bi-brightness-alt-high"
style="font-size: 2rem"
id="wed-8am"
></i>
</div>
<div class="col-2 text-center">
<i
class="bi bi-brightness-high"
style="font-size: 1.5rem"
id="wed-1pm"
></i>
</div>
<div class="col-2 text-center">
<i
class="bi bi-moon"
style="font-size: 1.35rem"
id="wed-6pm"
></i>
</div>
<div class="col-2 text-center">
<i
class="bi bi-arrow-clockwise"
style="font-size: 1.65rem"
id="wed"
onclick="changeBG(this.id)"
></i>
</div>
</div>
<div class="row">
<div class="col-2">
<p>Thu</p>
</div>
<div class="col-2 text-center">
<i
class="bi bi-brightness-alt-low"
style="font-size: 2rem"
id="thu-4am"
></i>
</div>
<div class="col-2 text-center">
<i
class="bi bi-brightness-alt-high"
style="font-size: 2rem"
id="thu-8am"
></i>
</div>
<div class="col-2 text-center">
<i
class="bi bi-brightness-high"
style="font-size: 1.5rem"
id="thu-1pm"
></i>
</div>
<div class="col-2 text-center">
<i
class="bi bi-moon"
style="font-size: 1.35rem"
id="thu-6pm"
></i>
</div>
<div class="col-2 text-center">
<i
class="bi bi-arrow-clockwise"
style="font-size: 1.65rem"
id="thu"
onclick="changeBG(this.id)"
></i>
</div>
</div>
<div class="row">
<div class="col-2">
<p>Fri</p>
</div>
<div class="col-2 text-center">
<i
class="bi bi-brightness-alt-low"
style="font-size: 2rem"
id="fri-4am"
></i>
</div>
<div class="col-2 text-center">
<i
class="bi bi-brightness-alt-high"
style="font-size: 2rem"
id="fri-8am"
></i>
</div>
<div class="col-2 text-center">
<i
class="bi bi-brightness-high"
style="font-size: 1.5rem"
id="fri-1pm"
></i>
</div>
<div class="col-2 text-center">
<i
class="bi bi-moon"
style="font-size: 1.35rem"
id="fri-6pm"
></i>
</div>
<div class="col-2 text-center">
<i
class="bi bi-arrow-clockwise"
style="font-size: 1.65rem"
id="fri"
onclick="changeBG(this.id)"
></i>
</div>
</div>
<div class="row">
<div class="col-2">
<p>Sat</p>
</div>
<div class="col-2 text-center">
<i
class="bi bi-brightness-alt-low"
style="font-size: 2rem"
id="sat-4am"
></i>
</div>
<div class="col-2 text-center">
<i
class="bi bi-brightness-alt-high"
style="font-size: 2rem"
id="sat-8am"
></i>
</div>
<div class="col-2 text-center">
<i
class="bi bi-brightness-high"
style="font-size: 1.5rem"
id="sat-1pm"
></i>
</div>
<div class="col-2 text-center">
<i
class="bi bi-moon"
style="font-size: 1.35rem"
id="sat-6pm"
></i>
</div>
<div class="col-2 text-center">
<i
class="bi bi-arrow-clockwise"
style="font-size: 1.65rem"
id="sat"
onclick="changeBG(this.id)"
></i>
</div>
</div>
<div class="row">
<div class="col-2">
<p>Sun</p>
</div>
<div class="col-2 text-center">
<i
class="bi bi-brightness-alt-low"
style="font-size: 2rem"
id="sun-4am"
></i>
</div>
<div class="col-2 text-center">
<i
class="bi bi-brightness-alt-high"
style="font-size: 2rem"
id="sun-8am"
></i>
</div>
<div class="col-2 text-center">
<i
class="bi bi-brightness-high"
style="font-size: 1.5rem"
id="sun-1pm"
></i>
</div>
<div class="col-2 text-center">
<i
class="bi bi-moon"
style="font-size: 1.35rem"
id="sun-6pm"
></i>
</div>
<div class="col-2 text-center">
<i
class="bi bi-arrow-clockwise"
style="font-size: 1.65rem"
id="sun"
onclick="changeBG(this.id)"
></i>
</div>
</div>
Javascript code is
function changeBG(id) {
function returnId(id) {
return id;
}
const elementId = returnId(id);
// console.log(elementId);
var mon4am = document.getElementById(`${elementId}-4am`);
var mon8am = document.getElementById(`${elementId}-8am`);
var mon1pm = document.getElementById(`${elementId}-1pm`);
var mon6pm = document.getElementById(`${elementId}-6pm`);
// monBlock.style.backgroundColor = "red";
mon4am.style.color = "#DEC20B";
mon8am.style.color = "blue";
mon1pm.style.color = "green";
mon6pm.style.color = "red";
}
Please find the below images
