Чтобы улучшить вашу систему, было бы предложено использовать A / Link вместо P для ваших элементов кликов, так как это поможет всем браузерам и пользователям понять, что это «активируемый» элемент и по природе A Элемент / Href предоставляет дополнительные визуальные подсказки, указатель мыши и другие основные моменты и наглядные пособия, чтобы пользователи могли понять, что пользователь может щелкнуть элемент.
Хотя это и не является абсолютно необходимым, я также рекомендую обернуть внутренние элементы кейса {}, но это может быть больше личного предпочтения / стиля.
<p>◆Traffic Light◆</p>
<p><a href="javascript:judge(red);" id="red"><font color="red">RED</font></a></p>
<p><a href="javascript:judge(yellow);" id="yellow"><font color="yellow">YELLOW</font></a></p>
<p><a href="javascript:judge(green);" id="green"><font color="lightgreen">GREEN</font></a></p>
<p>"I'll<span id="action">___</span>because the traffic light is<span id="light">___</span>!"</p>
<script>
var elem1 = document.getElementById("action");
var elem2 = document.getElementById("light");
var red = document.getElementById("red");
var yellow = document.getElementById("yellow");
var green = document.getElementById("green");
function judge(color){
switch(color)
{
case red:
{
elem1.innerHTML = " stop ";
elem2.innerHTML = " red ";
break;
}
case yellow:
{
elem1.innerHTML = " go with causion ";
elem2.innerHTML = " yellow ";
break;
}
case green:
{
elem1.innerHTML = " go ";
elem2.innerHTML = " green ";
break;
}
default:
{
console.log("error");
break;
}
}
}
</script>