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>