Buenas tardes a todos.
Soy nuevo en el foro y también en todo sobre programación.
Estaba intentando hacer un efecto para una página web en el que al darle click sobre una etiqueta div, que por defecto tiene color azul como fondo, cambiara a amarillo, luego otro click y a rojo, luego otro click y a verde y luego click y azul de nuevo. el codigo html que tengo es el siguiente:
Código HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Estilos CSS</title>
<link rel="shortcut icon" href="imagenes/icono2.gif"/>
<link rel="stylesheet" href="estilos.css">
<script type="text/javascript" src="script.js"></script>
</head>
<body onload="darColor()">
<div id="encabezado" onclick="cambiarColor()">
<h1>¡ Leer es vivir !</h1>
</div>
<ul id="menu">
<li id="azul"><a href="#">INICIO</a></li>
<li id="amarillo"><a href="#">PÁGINA 1</a></li>
<li id="rojo"><a href="#">PÁGINA 2</a></li>
<li id="verde"><a href="#">NOSOTROS</a></li>
</ul>
</body>
</html>
Y el escript es este:
Código:
function darColor(){
document.getElementById("encabezado").style.backgroundColor = "blue";
}
function cambiarColor(){
if (document.getElementById("encabezado").style.backgroundColor == "blue"){
document.getElementById("encabezado").style.backgroundColor = "yellow";
}
else if (document.getElementById("encabezado").style.backgroundColor == "yellow"){
document.getElementById("encabezado").style.backgroundColor = "red";
}
else if (document.getElementById("encabezado").style.backgroundColor = "red"){
document.getElementById("encabezado").style.backgroundColor = "lime";
}
else if (document.getElementById("encabezado").style.backgroundColor = "lime"){
document.getElementById("encabezado").style.backgroundColor = "blue";
}
}
Bueno, lo que sucede es que pasa bien hasta que llega al color Lime, pero cuando doy click no regresa al color azul
Si alguien puede ayudarme desde ya muchas gracias! Saludos