Style changing automatically everyday with JavaScript

Question

I have to create a 7 boxes with a some infos on it, and every boxes have to be in black and white. But each Box (for example Box number 1 with a Monday text on it) must be changed in own color automatically when we are on Monday (and another boxes in black and white) and the another boxes on Tuesday and... have to be continued like that

i write down my codes

For example we are now on Tuesday, but will changed the text in purple, not that pic!

i think, this property (-webkit-filter: grayscale(100%); filter: grayscale(100%);) can be removed everyday day in JavaScript, but i dont know how!

can u help me pls to find a solution for that? Tnx so much

 var d = new Date(); var weekday = new Array(7); weekday[0] = "yellow"; weekday[1] = "red"; weekday[2] = "green"; weekday[3] = "purple"; weekday[4] = "orange"; weekday[5] = "white"; weekday[6] = "brown"; document.getElementById("test").style.color = weekday[d.getDay()];

 #test { }.img-test { width: 100%; height: 390px; object-fit: cover; -webkit-filter: grayscale(100%); filter: grayscale(100%); }

 <section id="test"> <div class="col-md-4 mb-4"> <h2>Industrie</h2> <a class="position-relative d-block" href="" title=""> <img class="img-fluid img-test d-block mx-auto" src="image/Bild_11.jpg"> </a> </div> </section>

Answer 1

What about something like this?

var d = new Date();
var weekday = new Array(7);
weekday[0] = "yellow";
weekday[1] = "red";
weekday[2] = "green";
weekday[3] = "purple";
weekday[4] = "orange";
weekday[5] = "white";
weekday[6] = "brown";

document.getElementById(ELEMENT_ID).style.color = weekday[d.getDay()];