cambiar color. Soy principiante.

santosanto1 · #1 (**permalink**) 16/11/2012, 04:38

Hola a todos! soy mega principiante en todo esto y necesito ayuda... Estoy estudiando webmaster e hicimos esto en clase...

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Curso de JavaScript - Prueba de Estructuras</title>
<style type="text/css">
body{font-family:Helvetica,'Helvetica Neue',Arial;}
div{font-weight:bold;}
.box{width:150px;height:100px;margin:5px;cursor:po inter;}
.blue{background:#9cf;color:#369;}
.d-ib{display:inline-block;}
</style>
<script>
var strColorInicial='rgb(225, 187, 0)';//Naranja
var strColorFinal='rgb(102, 187, 102)';//Verde
function cambiarColor(caja){
//Capturo el color actual de la caja
var strColorActual = caja.style.backgroundColor;
//Si el color actual es igual al color final...
if(strColorActual==strColorFinal){
//Si es igual...
caja.style.backgroundColor=strColorInicial;
}else{
//Si no...
caja.style.backgroundColor=strColorFinal;
}
}
</script>
</head>
<body>
<h1>Curso de JavaScript</h1>
<h2>Inserción</h2>
<p>Existen tres formas de insertar javascript:</p>
<ol>
<li>Eventos (atributos) HTML</li>
<li>La etiqueta <srcipt></li>
<li>Documetno externo</li>
</ol>
<p>Ejemplos:</p>
<div class="box blue d-ib" onclick="cambiarColor(this);">Onclick</div>
<div class="box blue d-ib" onmouseover="cambiarColor(this);">Onmouseover</div>
<div class="box blue d-ib" onmouseout="cambiarColor(this);">Onmouseout</div>
<div class="box blue d-ib" onmousedown="cambiarColor(this);">Onmousedown</div>
<div class="box blue d-ib" onmouseup="cambiarColor(this);">Onmouseup</div>
<div>
<input class="box blue d-ib" onfocus="this.style.backgroundColor=strColorFinal; " value="onfocus"/>
<input class="box blue d-ib" onblur="this.style.backgroundColor=strColorFinal;" value="onblur"/>
</div>
<h2>Prueba de Estructuras</h2>
<ol>
<li>
<h3>Estructuras de Desición</h3>
<ol>
<li>
<h4>If/Else</h4>
</li>
<li>
<h4>Switch/Case</h4>
</li>
</ol>
</li>
<li>
<h3>Estructuras de Repetición</h3>
<ol>
<li><h4>For</h4></li>
<li><h4>While</h4></li>
<li><h4>Do While</h4></li>
</ol>
</li>
</ol>
</body>
</html>

Y la tarea que nos dejó el profesor es hacer que los cuadrados puedan volver al color original. En este caso el azul... pero no tengo idea como hacer... Él me dijo que consulte en un foro y que seguro se iban a reir de mi porque es muy facil de hacer... En fin, gracias por la ayuda!!

iukaeru · #2 (**permalink**) 16/11/2012, 10:48

JAJAJAJAJAJAJAJAJAJA.

Bueno ya me reí, ahora te ayudo.

Tan solo cambia ésta línea y ya está:
var strColorInicial='rgb(225, 187, 0)';//Naranja
Por
var strColorInicial='#9cf';//Azul

NINGUNA COSA QUE TENGA QUE VER CON EL APRENDIZAJE ES UNA TRIVIALIDAD, así que no debes sentir que esto es risible o "fácil" de hacer. Dile a un médico o a un abogado que te haga ésto y verás cómo cambia de colores y te diga algo como -"¿Eso es Chino o Japonés?"-.

santosanto1 · #3 (**permalink**) 16/11/2012, 17:01

Gracias por responder!!

Ya probe! y me expresé un poco mal... el profesor quiere que vaya al verde, luego al naranja y luego al azul otra vez... y que funcione automaticamente si yo le cambio el color azul (en la linea 10) por otro color (por ejemplo, rojo), sin tener que tocar de nuevo el script... no se si se entiende... espero que si... estamos dando JavaScript...

Gracias otra vez! (muy cierto lo que dijiste de los medicos y abogados! :) )

furoya · #4 (**permalink**) 16/11/2012, 18:56

Chicos: el código se escribe entre etiquetas de código. Gracias.

Yo te había entendido que al disparar con otro evento, el color tenía que "rotar" de anaranjado a verde a azul, y empezar de nuevo.

Normalmente aquí no le hacemos la tarea a nadie, no es la función de un Foro; pero resulta que tu planteo tiene un detalle, que podés descubrir vos mismo, pero por lo general (si tu profesor no lo menciona o te guía) nadie lo saca.

Estás haciendo un condicional, y además de empezar en if(){} y terminar en else{}, en el medio los podés encadenar, para usar más condiciones. En este caso, querés que si empieza en el azul, que lo cambie a anaranjado. Que si está en anaranjado, que lo cambie a verde. Y que si está en verde, lo cambie al azul, y vuelta a empezar. Cada cambio con un evento.

Para eso se usa

Código:

if(unaCondicion){
algo();
}

else if(otraCondicion){
otroAlgo();
}

else if(otraCondicionMas){
otroAlgoMas();
}

else{
ultimoAlgo();
}

En vez de cambiar una variable, agregala; porque te falta la azul.