By bpr59
I am new to coding and working on a javascript project. I am trying to setup a change in “class” attribute (change of background color) in a textarea. The change should happen according to time of day which I am accessing via moment.js. This is a 9am to 5pm scheduler in which each hour block should change background color depending if it is past-time, present-time or in the future. I try to do it with a switch statement but I think my syntax is not what it should be. This is the code I am using:
var correctTime = moment().hour();
var time17 = 17
var time18 = 18;
switch(time17) {
case correctTime > time17:
switchClass("box5").addClass("past");
break;
case correctTime >= time17 && correctTime < time18:
switchClass("box5").addClass("present");
break;
case correctTime < time17:
switchClass("box5").addClass("future");
break;
default:
}
This are the classes in the css file:
.past {
background-color: #d3d3d3;
color: white;
font-size: 30px;
text-shadow: black 2px 2px;
}
.present {
background-color: #ff6961;
color: white;
font-size: 30px;
text-shadow: black 2px 2px;
}
.future {
background-color: #77dd77;
color: white;
font-size: 30px;
text-shadow: black 2px 2px;
}
This is the portion of the HTML:
<div class="row" id="5pm">
<div class="col-md-2"><h3 id="5pmTime" class="timeOfDay">5:00pm</h3></div>
<div class="col-md-8" id="textbox-5"><Textarea class="text-box" id="box5" value=". </Textarea></div>
<div class="col-md-2"><button class="saveBtn" class="save-box" id="save5pm"><img src="assets/savebutton.png" height="45px"></button></div>
</div>
This textbox defaults to using Markdown to format your answer.
You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!
Heya,
I think the switch-case syntax in your JavaScript code isn’t correct. In JavaScript, the switch statement evaluates an expression, matching the expression’s value to a case clause, and executes statements associated with that case. However, your case clauses are using comparison operators, which will not work as expected.
Instead of using switch-case, it would be better to use if-else statement in your scenario, as follows:
var correctTime = moment().hour();
var time17 = 17
var time18 = 18;
var box5 = document.getElementById('box5');
if (correctTime > time17) {
box5.classList.add("past");
} else if (correctTime >= time17 && correctTime < time18) {
box5.classList.add("present");
} else if (correctTime < time17) {
box5.classList.add("future");
}
Here, we are using getElementById to get the textarea with id box5 and then using the classList.add method to add the desired class to it. This way, you can add the desired class based on the current time.
Remember that you should ensure that only one of “past”, “present”, “future” classes is applied at any time, otherwise they might conflict with each other. You might want to clear these classes before adding a new one:
box5.classList.remove("past", "present", "future");
Become a contributor for community
Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.
DigitalOcean Documentation
Full documentation for every DigitalOcean product.
Resources for startups and AI-native businesses
The Wave has everything you need to know about building a business, from raising funding to marketing your product.
The developer cloud
Scale up as you grow — whether you're running one virtual machine or ten thousand.
Get started for free
Sign up and get $200 in credit for your first 60 days with DigitalOcean.*
*This promotional offer applies to new accounts only.