M_Griffiths M_Griffiths - 4 months ago 17
HTML Question

change class on div every 3 seconds

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' 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 = "O.K";
}
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>




Answer

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 = "O.K";
                    }
                    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>