change class on div every 3 seconds
Question
I hope you are all well. I was wondering if your collective genius could help me? I have a div which is a circle. I also have three CSS classes. I would like to change the class of the div and the text of the label every 3 seconds. Anyone who could point out where I am going wrong would be extremely helpful.
Here's what I have, which at the moment doesn't seem to do anything:
function loadTraffLight() { var traffLight = document.getElementById("traffLight"); var status = document.getElementById("status"); var timer; var go = function traffGo() { timer = setInterval(function() { if (traffLight.class == "red") { traffLight.className = "yellow"; status.innerText = "OK"; } else if (traffLight.class == "yellow") { traffLight.className = "green"; status.innerText = "Authorised"; } else { traffLight.className = "red"; status.innerText = "Stop Working"; } }, 3000); }; }
#traffLight { border-radius: 100px; width: 200px; height: 200px; border: 1px solid #000000; margin: 0 auto; color: #808080; } #status { text-align: center; vertical-align: bottom; } .red { background: #ff0000; } .yellow { background: #ffd800; } .green { background: #00ff21; }
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title>Traffic light</title> </head> <body onload="loadTraffLight()"> <h1>Traffic light effect demo</h1> <div id="traffLight"> <label id="status"></label> </div> </body> </html>
2 answers
solution1
1 ACCPTED 2016-07-14 16:49:44
Please use className consistenly. Apart from that, I have changed the structure of your function a bit:
function loadTraffLight() { var traffLight = document.getElementById("traffLight"); var status = document.getElementById("status"); var timer; timer = setInterval(function () { if (traffLight.className == "red") { traffLight.className = "yellow"; status.innerText = "OK"; } else if (traffLight.className == "yellow") { traffLight.className = "green"; status.innerText = "Authorised"; } else { traffLight.className = "red"; status.innerText = "Stop Working"; } }, 1000); }
#traffLight{ border-radius:100px; width:200px; height:200px; border:1px solid #000000; margin:0 auto; color:#808080; } #status{ text-align:center; vertical-align:bottom; } .red{ background:#ff0000; } .yellow{ background:#ffd800; } .green{ background:#00ff21; }
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title>Traffic light</title> </head> <body onload="loadTraffLight()"> <h1>Traffic light effect demo</h1> <div id="traffLight"> <label id="status"></label> </div> </body> </html>
solution2
1 2016-07-14 16:50:52
Two things:
- You never call
traffGo()inloadTraffLight() - You should be comparing with
traffLight.classNameinstead oftraffLight.class
See the amended code below:
function loadTraffLight() { var traffLight = document.getElementById("traffLight"); var status = document.getElementById("status"); var timer; function traffGo() { timer = setInterval(function () { if (traffLight.className == "red") { traffLight.className = "yellow"; status.innerText = "OK"; } else if (traffLight.className == "yellow") { traffLight.className = "green"; status.innerText = "Authorised"; } else { traffLight.className = "red"; status.innerText = "Stop Working"; } }, 3000); }; traffGo(); }
#traffLight{ border-radius:100px; width:200px; height:200px; border:1px solid #000000; margin:0 auto; color:#808080; } #status{ text-align:center; vertical-align:bottom; } .red{ background:#ff0000; } .yellow{ background:#ffd800; } .green{ background:#00ff21; }
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title>Traffic light</title> </head> <body onload="loadTraffLight()"> <h1>Traffic light effect demo</h1> <div id="traffLight"> <label id="status"></label> </div> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Trying to change div by class every 5 seconds jquery
change/shift down class names on div for every 3 seconds on React
Check the div's height every 5 seconds and change class if true
Need to change div background every 3 seconds?
JQuery: change content of <div> every 5 seconds
Make div top position change every x seconds
JavaScript, How to change the background of a div tag every x seconds
Javascript carousel, display random div and change every 3 seconds
Change class every few seconds from values in array
react.js How to change the ball's class every seconds?
Related Tags