I’m trying to change the background and one (1) heading to different colors after a certain time on my webpage (1700 hours). However, it doesn’t trigger. What am I doing wrong here?
var today = new Date();
var time = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();
var dayLight = 0900;
var lightMode = 1700;
if (time >= dayLight && time <= lightMode) {
document.body.style.backgroundColor = "white";
document.querySelector("h1.example").style.color = "black";
console.log(time + " " + "=" + " " + "Light Mode!");
} else {
document.body.style.backgroundColor = "black";
document.querySelector("h1.example").style.color = "white";
console.log(time + " " + "=" + " " + "Dark Mode!");
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Dark Mode Example</title>
</head>
<body>
<h1 class="example">Dark Mode Example</h1>
<p>Test Paragraph</p>
</body>
<script src="script.js"></script>
</html>Advertisement
Answer
//I just set an interval for every second to check the time again
var s=setInterval(()=>{
var today = new Date();
var time = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();
var dayLight = 0900;
var lightMode = 1700;
if (time >= dayLight && time <= lightMode) {
document.body.style.backgroundColor = "white";
document.querySelector("h1.example").style.color = "black";
//console.log(time + " " + "=" + " " + "Light Mode!");
} else {
document.body.style.backgroundColor = "black";
document.querySelector("h1.example").style.color = "white";
//console.log(time + " " + "=" + " " + "Dark Mode!");
}
},1000)<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Dark Mode Example</title>
</head>
<body>
<h1 class="example">Dark Mode Example</h1>
<p>Test Paragraph</p>
</body>
<script src="script.js"></script>
</html>