<html>
<head>
<title>ejercicio avanzado</title>
</head>
<script>
function semaforo()
{
var variable1=document.getElementById('arriba')
var variable2=document.getElementById('medio')
var variable3=document.getElementById('abajo')
if (variable2.src.match("semaforo_apagado.png") && variable1.src.match("semaforo_apagado.png"))
{
variable1.src="semaforo_rojo.png";
variable3.src="semaforo_apagado.png";
}
else if (variable1.src.match("semaforo_rojo.png"))
{
variable2.src="semaforo_amarillo.png";
variable1.src="semaforo_apagado.png";
}
else if (variable2.src.match("semaforo_amarillo.png"))
{
variable3.src="semaforo_verde.png";
variable2.src="semaforo_apagado.png";
}
{
}
}
</script>
<body>
<center>
<img id="arriba" src="semaforo_apagado.png" width="190" height="190"></img>
<br/>
<img id="medio" src="semaforo_apagado.png" width="190" height="190"></img>
<br/>
<img id="abajo" src="semaforo_apagado.png" width="190" height="190"></img>
<br/>
<button onclick="semaforo()">cambiar semaforo</button>
</center>
</body>
</html>