Currently, I'm encountering errors while working on this project in Notepad. Can you help me figure out what's wrong with my code? I'm attempting to create an onload traffic light using an object array. The requirement is to implement this function through an array.
<html>
<body onload="loop()">
<div style="background:black;width:75px;height:140px;margin:auto;">
<div id ="red" style="background:red;width:40px;height:40px;border-radius:40px;margin:auto;"></div>
<div id = "yellow" style="background:#3F4A00;width:40px;height:40px;border-radius:40px;margin:auto"></div>
<div id = "green" style="background:#044A00;width:40px;height:40px;border-radius:40px;margin:auto"></div>
<!--The style refers to css, the background -->
</div>
<script>
var redlight = document.getElementById('redlight');
var yellowlight = document.getElementById('yellowlight');
var greenlight = document.getElementById('greenlight');
var colors = ["rgb(255, 0, 0)",'rgb(82, 2, 2)','rgb(255, 255, 0)','rgb(63, 74, 0)','rgb(0, 128, 0)','rgb(4, 74, 0)'];
function loop() {
if (redlight.style.backgroundColor == colors[0]){
redlight.style.backgroundColor = colors[1]; //switch off red
yellowlight.style.backgroundColor = colors[2]; //switch on yellow
}
else if (yellowlight.style.backgroundColor == colors[2]) {
yellowlight.style.backgroundColor = colors[3]; //switch off yellow
greenlight.style.backgroundColor = colors[4]; //switch on green
}
else if (greenlight.style.backgroundColor == colors[4]) {
greenlight.style.backgroundColor = colors[5]; //switch off green
redlight.style.backgroundColor = colors[0]; //switch on red
}
setInterval(function() {
},3000); //this sets the intervals for each traffic light to change colors
}
</script>
</body>
</html>