Cambiar Propiedades Css con JavaScript

sabina92 · #1 (**permalink**) 18/08/2015, 16:57

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

MaNuX0218 · #2 (**permalink**) 18/08/2015, 17:15

Que intentas hacer, cambiar el color automaticamente o cambiarlo cada vez que haces clic con el ratón(cosa que lo que estas haciendo).

Saludos.

sabina92 · #3 (**permalink**) 18/08/2015, 17:21

Gracias por tu ayuda. En efecto trato de que cambie de color con cada click, y funciona bien hasta que debe pasar del color lime al azul.

La secuencia sería: azul-amarillo-rojo-verde

PHPeros · #4 (**permalink**) 19/08/2015, 04:02

Se puede hacer de bastantes formas, ésta es la más efectiva para mi gusto ya que no necesita condiciones:

Código Javascript:

Ver originalvar colores  = ['blue','yellow','red','lime'],
    index = 0;
 
function cambiar(){
  elemento.style.backgroundColor = colores[(index++ % colores.length)];
}

sabina92 · #5 (**permalink**) 19/08/2015, 18:47

Muchas gracias PHPeros! Funcionó perfectamente.

Solo a modo de conocimiento general, ¿Qué era lo que causaba error en el código que había escrito?

PHPeros · #6 (**permalink**) 20/08/2015, 03:28

Pues el error es que has usado = en vez de == en los dos últimos ifs, por lo tanto se quedaba atascado. Pero puedes ver que corregido funciona sin problema.