Foros del Web » Programando para Internet » Javascript »

cambio de background-color a un div a traves de radiobuttons

Estas en el tema de cambio de background-color a un div a traves de radiobuttons en el foro de Javascript en Foros del Web. Hola, resulta que tengo la siguiente página en donde quiero que a través del uso de radiobotones se cambie el color de un div. El ...
  #1 (permalink)  
Antiguo 04/02/2010, 20:12
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 14 años, 10 meses
Puntos: 269
cambio de background-color a un div a traves de radiobuttons

Hola, resulta que tengo la siguiente página en donde quiero que a través del uso de radiobotones se cambie el color de un div. El codigo lo tomé de aquí e intento adaptarlo a otro diseño. Mas no entiendo en que estoy fallando.

Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>experimento</title>
        <style type="text/css" media="all">
            body{
                font-family:Arial, Helvetica, sans-serif;
                font-size:16px;
            }
            #content{
                width:150px;
                height:20px;
                background-color:#66FFCC;
                padding:10px;
                text-align:left;
            }
            #escribeDatos{
                display:none;
                };
            #cerrarEscritura{
                display:none;
            }
            #masDatos{
                cursor:pointer;
            }
        </style>
    </head>
    <body onload="cambiaColor()">
        <script type="text/javascript" language="JavaScript">
        </script>
        <div id="content">
            <span>materia</span>
            <span id="masDatos" onclick="
            getElementById('content').style.width='600px';
            getElementById('cerrarEscritura').style.display='inline';
            getElementById('cerrarEscritura').style.cursor='pointer';
            getElementById('escribeDatos').style.display='inline';
            this.style.display='none';"
            >[+]</span>
            
            <span id="cerrarEscritura" onclick="this.style.display='none';
            getElementById('content').style.width='150px';
            getElementById('masDatos').style.display='inline';
            getElementById('escribeDatos').style.display='none';">
                [-]
            </span>
            
            <form id="escribeDatos">
                <input id="valor1" type="radio" name="opcion" value="ff0000">
                <span>cursando</span>    
                <input id="valor1" type="radio" name="opcion" value="00ff00">
                <span>regular</span>    
                <input id="valor1" type="radio" name="opcion" value="0000ff">
                <span>libre</span>    
                <input id="valor1" type="radio" name="opcion" value="ff00ff">
                <span>aprobada</span>    
                <input type="button" value="Cambia Color" onclick="cambiaColor()">
            </form>
        </div>
        
<script> 
function cambiaColor(){ 
    var i 
    for (i=0;i<document.getElementById('content').escribeDatos.opcion.length;i++){ 
       if (document.getElementById('content').escribeDatos.opcion[i].checked) 
          break; 
    } 
    document.getElementById('content').style.backgroundColor = document.getElementById('content').escribeDatos.opcion[i].value;
} 
</script> 

    </body>
</html>
Desde ya gracias por su ayuda.

p/d:
Hice la siguiente práctica en la que cambio de color un div y si lo prueban verán que funciona. Pero no puedo hacerlo con la página de arriba.

Código:
<html> 
<head> 
    <title>Ejemplo Radio Button</title> 
<script> 
function cambiaColor(){ 
    var i 
    for (i=0;i<document.formulario.autoex.length;i++){ 
       if (document.formulario.autoex[i].checked) 
          break; 
    } 
    document.getElementById('cambiaso').style.backgroundColor = document.formulario.autoex[i].value 
} 
</script> 
</head> 

<body> 
<form name="formulario"> 
<input type="Radio" name="autoex" value="ffffff" checked> Blanco 
<br> 
<input type="Radio" name="autoex" value="ff0000"> Rojo 
<br> 
<input type="Radio" name="autoex" value="00ff00"> Verde 

<br> 
<input type="Radio" name="autoex" value="0000ff"> Azul 
<br> 
<input type="Radio" name="autoex" value="ffff00"> Amarillo 
<br> 
<input type="Radio" name="autoex" value="00ff00"> Turquesa 
<br> 
<input type="Radio" name="autoex" value="ff00ff"> Morado 
<br> 
<input type="Radio" name="autoex" value="000000"> Negro 
<br> 
<br> 

<input type="Button" name="" value="Cambia Color" onclick="cambiaColor()"> 
</form> 

<div id="cambiaso"> aquí funciona </div>
</body> 
</html>
  #2 (permalink)  
Antiguo 04/02/2010, 20:17
Avatar de David
Moderador
 
Fecha de Ingreso: abril-2005
Ubicación: In this planet
Mensajes: 15.720
Antigüedad: 19 años
Puntos: 839
Respuesta: cambio de background-color a un div a traves de radiobuttons

En lugar de esto:
Código Javascript:
Ver original
  1. document.getElementById('content').escribeDatos
Usa:
Código Javascript:
Ver original
  1. document.getElementById('escribeDatos')
__________________
Por favor, antes de preguntar, revisa la Guía para realizar preguntas.
  #3 (permalink)  
Antiguo 04/02/2010, 21:13
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 14 años, 10 meses
Puntos: 269
Respuesta: cambio de background-color a un div a traves de radiobuttons

Muchísimas gracias David, . Millon de gracias! Ahora funciona. Pero por alguna razón se ve en ie y no en firefox.

Última edición por cristian_cena; 04/02/2010 a las 21:21
  #4 (permalink)  
Antiguo 05/02/2010, 05:53
Avatar de David
Moderador
 
Fecha de Ingreso: abril-2005
Ubicación: In this planet
Mensajes: 15.720
Antigüedad: 19 años
Puntos: 839
Respuesta: cambio de background-color a un div a traves de radiobuttons

Para que funcione en Firefox, agrega un # a los colores. Por ejemplo:
#ff0000 en lugar de ff0000
__________________
Por favor, antes de preguntar, revisa la Guía para realizar preguntas.
  #5 (permalink)  
Antiguo 05/02/2010, 06:48
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 14 años, 10 meses
Puntos: 269
Respuesta: cambio de background-color a un div a traves de radiobuttons

Gracias nuevamente david, problema resuelto .

Un abrazo!
  #6 (permalink)  
Antiguo 06/02/2010, 11:55
 
Fecha de Ingreso: febrero-2010
Mensajes: 96
Antigüedad: 14 años, 2 meses
Puntos: 1
Respuesta: cambio de background-color a un div a traves de radiobuttons

Esto lo harías mucho más fácilmente con jQuery!
  #7 (permalink)  
Antiguo 06/02/2010, 12:05
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 14 años, 10 meses
Puntos: 269
Respuesta: cambio de background-color a un div a traves de radiobuttons

Cita:
Iniciado por xorcisa Ver Mensaje
Esto lo harías mucho más fácilmente con jQuery!
Gracias xorcisa, actualmente estoy aprendiendo a utilizar jquery, pero decidi hacerlo con javascript puro porque soy nuevo en javascript y pensé que hacerlo de esta manera me ayudaría a aprender mejor el lenguaje. Pienso de esta manera porque cuando trabajo con css lo hago todo sin frameworks, aunque con jquery veo que se ahorra bastante tiempo.
  #8 (permalink)  
Antiguo 06/02/2010, 12:07
 
Fecha de Ingreso: febrero-2010
Mensajes: 96
Antigüedad: 14 años, 2 meses
Puntos: 1
Respuesta: cambio de background-color a un div a traves de radiobuttons

Se ahorra mucho tiempo. Yo también m estoy iniciando en jQuery y de javascript no tengo mucha idea asique estamos igualmente..si tienes más dudillas por aqui estoy.

Saludos!
  #9 (permalink)  
Antiguo 06/02/2010, 12:08
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 14 años, 10 meses
Puntos: 269
Respuesta: cambio de background-color a un div a traves de radiobuttons

Gracias xorcisa, no sabes cuanta ayuda me hace falta jaja. Iremos aprendiendo juntos, me fascina esto de javascript y ni hablar de jquery y ajax.
  #10 (permalink)  
Antiguo 06/02/2010, 12:10
 
Fecha de Ingreso: febrero-2010
Mensajes: 96
Antigüedad: 14 años, 2 meses
Puntos: 1
Respuesta: cambio de background-color a un div a traves de radiobuttons

Okeeeey :D
  #11 (permalink)  
Antiguo 06/02/2010, 12:18
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 22 años
Puntos: 1284
Respuesta: cambio de background-color a un div a traves de radiobuttons

Cita:
Iniciado por xorcisa Ver Mensaje
Esto lo harías mucho más fácilmente con jQuery!
No crees que es absurdo usar toda una librería para resolver un problema que de la forma "clásica" se resuelve con solo una línea

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #12 (permalink)  
Antiguo 06/02/2010, 12:20
 
Fecha de Ingreso: febrero-2010
Mensajes: 96
Antigüedad: 14 años, 2 meses
Puntos: 1
Respuesta: cambio de background-color a un div a traves de radiobuttons

Pues si, tienes razón. Jquery es para cosas concretas y que no se pueden resolver solo con js.

Saludos!
  #13 (permalink)  
Antiguo 06/02/2010, 12:31
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 22 años
Puntos: 1284
Respuesta: cambio de background-color a un div a traves de radiobuttons

Cita:
Iniciado por xorcisa Ver Mensaje
Pues si, tienes razón. Jquery es para cosas concretas y que no se pueden resolver solo con js.

Saludos!
¡Je, je!... si jQuery está hecho con javascript...
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #14 (permalink)  
Antiguo 06/02/2010, 12:34
 
Fecha de Ingreso: febrero-2010
Mensajes: 96
Antigüedad: 14 años, 2 meses
Puntos: 1
Respuesta: cambio de background-color a un div a traves de radiobuttons

Ya lo se pero no se usan para igual función...weno dejemoslo ahi...que yo no ntiendo mucho...

Etiquetas: background-color, radiobuttons, cambios
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 20:15.