html交通灯插件,HTML＆JavaScript交通灯

所以我必须为工作交通灯编写一段代码，点击按钮后灯光发生变化，然后另一个按钮将启动自动序列，在x时间后自动更换灯光。现在，由于这是一个CS的研究任务，我正在寻找简单的代码进行开发，并找到以下链接，我从中创建了以下代码;HTML＆JavaScript交通灯

Traffic Light

var lightStates = {red:0,amber:1,green:2};

var currentState = lightStates.red;

document.getElementById('changeBtn').οnclick=function(){

changeState();

};

function changeState()

{

clear();

switch(currentState)

{

case lightStates.red:

{

document.getElementById("red").className ="light red";

currentState = lightStates.amber;

}

break;

case lightStates.amber:

{

document.getElementById("amber").className ="light amber";

currentState = lightStates.green;

} break;

case lightStates.green:

{

document.getElementById("green").className ="light green";

currentState = lightStates.red;

} break;

}

}

function clear(){

document.getElementById("red").className ="light off";

document.getElementById("amber").className ="light off";

document.getElementById("green").className ="light off";

}

.traffic-light

{

width:50px;

height:75px;

background-color:gray;

}

.light

{

width:20px;

height:20px;

border:1px solid;

margin-left:auto;

margin-right:auto;

border-radius: 50px;

}

.red

{

background-color:red

}

.amber

{

background-color:yellow

}

.green

{

background-color:green;

}

.off

{

background-color:transparent;

}

Change

现在提供的网站上，红绿灯似乎同时在矿区显示的红绿灯完美工作，但我似乎不能够得到显示任何颜色。任何人都可以请我指点我错误的方向，因为我对HTML，CSS和JavaScript有最少的经验。谢谢！