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?
JavaScript
x
15
15
1
var today = new Date();2
var time = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();3
var dayLight = 0900;4
var lightMode = 1700;5
6
7
if (time >= dayLight && time <= lightMode) {8
document.body.style.backgroundColor = "white";9
document.querySelector("h1.example").style.color = "black";10
console.log(time + " " + "=" + " " + "Light Mode!");11
} else {12
document.body.style.backgroundColor = "black";13
document.querySelector("h1.example").style.color = "white";14
console.log(time + " " + "=" + " " + "Dark Mode!");15
}JavaScript
1
17
17
1
<!DOCTYPE html>2
<html lang="en">3
4
<head>5
<meta charset="UTF-8">6
<title>Dark Mode Example</title>7
</head>8
9
<body>10
11
<h1 class="example">Dark Mode Example</h1>12
13
<p>Test Paragraph</p>14
</body>15
<script src="script.js"></script>16
17
</html>Advertisement
Answer
JavaScript
1
18
18
1
//I just set an interval for every second to check the time again2
var s=setInterval(()=>{3
var today = new Date();4
var time = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();5
var dayLight = 0900;6
var lightMode = 1700;7
8
9
if (time >= dayLight && time <= lightMode) {10
document.body.style.backgroundColor = "white";11
document.querySelector("h1.example").style.color = "black";12
//console.log(time + " " + "=" + " " + "Light Mode!");13
} else {14
document.body.style.backgroundColor = "black";15
document.querySelector("h1.example").style.color = "white";16
//console.log(time + " " + "=" + " " + "Dark Mode!");17
}18
},1000)JavaScript
1
17
17
1
<!DOCTYPE html>2
<html lang="en">3
4
<head>5
<meta charset="UTF-8">6
<title>Dark Mode Example</title>7
</head>8
9
<body>10
11
<h1 class="example">Dark Mode Example</h1>12
13
<p>Test Paragraph</p>14
</body>15
<script src="script.js"></script>16
17
</html>