Cambiar con un boton el color del fondo de un div

sebasdevoto · #1 (**permalink**) 20/06/2010, 22:14

Hola estoy tratando poder realizar que con formulario
al ingresar un nombre de color me tome un estilo para el div
si no que tome otro, usaria un switch si se puede, les envio los codigos asi los revisan, me interesaria mas saber como encarar el html y el archivo javascript
ya que probe de todo y no hay caso, solo logre, hacer un simple cambio de fondo nada mas tipeando en el campo de formulario azul, rojo o vede mendiante un switch, pero quiero que me modifique un div, espero alguna respuesta, que capas me va a servir tambien por si quiero trabajar un texto, ya sea cambiarle el color, tamaño o demas, gracias, Sebastian.

HTML

<body>

<div id="titulo">
<p class="titulo2">Titulo</p>
</div>

<div id="pruebacolor">
<label>Elegi un color (Verde - Azul - Rojo)</label>
<form id="formu1" method="post" action="">
<input type="text" id="dato" maxlength="10"/><br />
<input type="button" value="APLICAR" onclick="prueba()"/>
</form>
</div>

JAVASCRIPT

function prueba(pruebacolor)
{
var campo=document.getElementById("dato").value;
var color=document.getElementById("pruebacolor");

switch (campo) {
case 'rojo': color.className='pruebacolor';
break;
case 'verde': document.bgColor='#00ff00';
break;
case 'azul': document.bgColor='#0000ff';
break;
}
}

rebouy · #2 (**permalink**) 21/06/2010, 00:11

No entendi bien tu pregunta, pero creo que necesitas algo asi:

Código HTML:

Ver original<p>Elegi un color (Verde - Azul - Rojo)</p>
 
<input type="text" id="dato" maxlength="10"/><br />
<input type="button" value="APLICAR" onclick="prueba()"/>
<div id="prueba" style="width:100px;height:100px;background:black;color:white;">div prueba</div>
 
 
<script>
function prueba()
{
var campo=document.getElementById("dato").value;
 
var prueba=document.getElementById("prueba");
switch (campo) {
case 'rojo': prueba.style.background="red";
break;
case 'verde':prueba.style.background="green";
break;
case 'azul':prueba.style.background="blue";
 
}
}
</script>

Chau suerte!.

sebasdevoto · #3 (**permalink**) 21/06/2010, 19:55

Mil gracias rebouy, te comento estoy estudiando programacion web y realmente me esta costando entender, pero eso que me pasaste lo pude interpretar y pude hacer andar mi ejercicio, espero que esto sea seÑal que estoy aprendiendo o entendiendo algo ajjajajaja, si yo quisiera cambiar los colores con 3 botones que digan rojo, azul y verde, y al apretar los mismos cambien los colores, es mucho cambio en el codigo? Espero tu respuesta, gracias, sebastian.

rebouy · #4 (**permalink**) 21/06/2010, 22:48

Gracias a vos tambien ya que tu pregunta me hizo investigar un rato, al intentar hacer el codigo mas chico y por suerte lo logre, osea de esta manera si queres mas botones solo tenes que agregar el boton y el color que quieras al atributo name y no hacer un switch que crece con cada boton.

Código HTML:

Ver original<input type="button" name="red" value="rojo" onclick="cambia(this)">
<input type="button" name="green" value="verde" onclick="cambia(this)">
<input type="button" name="blue" value="azul" onclick="cambia(this)">
 
<div id="prueba" style="width:100px;height:100px;background:black;color:white;">div prueba</div> 
<script>
function cambia(boton){
 
     var color=boton.name;
        document.getElementById("prueba").style.background=color;
}
</script>

Suerte cualquier cosa avisa.

_cronos2 · #5 (**permalink**) 22/06/2010, 08:10

Se puede hacer así pero es arriesgarse a lo tonto, porque red o white lo tienene todos los navegadores pero hay ciertos colores que no, por eso es mejor ponerlo en hexadecimal. Por otra parte, el atributo es backgroundColor, background supongo que también funciona pero no está aprobado, o eso tengo entendido.
Saludos (:

rebouy · #6 (**permalink**) 22/06/2010, 16:52

Si cronos tenes razon, lo de los colores lo di por entendido(por parte de sebasdevoto), ya que en su primer pregunta uso hexadecimal para los colores y con respecto a backgroundColor aprendi algo nuevo, porque yo queria usar esa propiedad pero la escribia igual que en css background-color y por supuesto no funcionaba, gracias! chau

_cronos2 · #7 (**permalink**) 22/06/2010, 23:33

Las propiedaddes 'compuestas' de CSS se acceden en JS quitándoles el guión y poniéndolo en mayus. Por ejemplo, background-color es backgroundColor, font-size es fontSize, etc...
Saludos (:

rebouy · #8 (**permalink**) 22/06/2010, 23:49

Gracias cronos, una consulta ¿como se usa :hover en javascript?
probe asi document.getElementById("id").style.hover, pero no va

caricatos · #9 (**permalink**) 23/06/2010, 00:14

Hola:

Sobre el estilo background, no se trata de algo desaprobado, sino de un tipo de estilo que agrupa más propiedades, color, image, repeat, etc... cuando solo se quiere cambiar un color, creo que es mejor backgroundColor, pero para agrupar estilos va bien esto:
background = "red url(fondo.jpg) no-repeat center center";

Y los hover, en realidad se trata de un evento... ¿No te parece?

Claro que también se puede usar un "className".

Saludos

rebouy · #10 (**permalink**) 23/06/2010, 01:36

Si caricatos no lo habia pensado, simplemente usar onMouseOver y me olvido del hover

Saludos y gracias.

sebasdevoto · #11 (**permalink**) 23/06/2010, 19:59

Yo estoy estudiando y me esta costando entender todavia la logica de la programacion, no se si sera normal, si no sirvo para esto, x momento me deprime, por que no puedo hacer nada, alguien me puede dar algun consejo o algo para ver si puedo sazarle la mano, gracias.

_cronos2 · #12 (**permalink**) 24/06/2010, 05:24

Aah claro, entonces background hace 'lo mismo' que border, agrupa estilos. Nunca había visto background en solitario.
Saludos (:

sebasdevoto · #13 (**permalink**) 24/06/2010, 21:06

Alguien tiene ejercicios de logica para principiante?
espero respuesta, relacionado a javascript obviamente.

_cronos2 · #14 (**permalink**) 25/06/2010, 07:06

¿A qué te refieres con ejercicios de lógica?