No sé cómo llegar para que al hacer click en los radio del html me cambie el fondo y texto, es decir, al pinchar en uno de los “radio buttons” tiene que modificarse el fondo y el texto de los elementos HTML con id “info1” e “info2”.
Por ejemplo, si elijo el primer radio button, se pondrá el fondo “rojo” (red) y el texto “red” en ambos elementos HTML.
Después en el select ‘border_1’, al elegir una de las opciones, tiene que modificarse tanto el borde como el fondo de los elementos HTML con id “info1” e “info2”.
Si se elige la opción con value =”#008000|cyan”, se pondrá como fondo el color “#008000” y el borde del color en “cyan”. Ando un poco confuso con el tema de eventos.
window.onload = function () {
document.getElementsByName('color_fondo').onchange = function() {
var borde=document.getElementById('border_1').value[0];
document.getElementById('div1').style.borderColor='gray';
}
};
#div1{
float:left;
}
.dleft{
float:left;
width:300px;
padding:20px;
}
#info1,#info2{
font-family:Arial;
font-size:1em;
color:#fff;
width:100px;
padding:5px;
margin:5px;
border:5px solid #555;
}
<div class="dleft">
<input type="radio" name="color_fondo" value="red" /> Fondo Rojo y cambia texto</br>
<input type="radio" name="color_fondo" value="blue" /> Fondo Azul y cambia texto</br>
<input type="radio" name="color_fondo" value="green" /> Fondo Verde y cambia texto</br></br>
<select name="border_1" id="border_1">
<option value="#555|#000" >Elige un color de borde (gris)</option>
<option value="#008000|cyan">Fondo Verde - Borde Cyan</option>
<option value="#FF0000|yellow">Fondo Rojo - Borde Amarillo</option>
</select>
</div>
<div id="div1" class="dright">
<input id="info1" name="info1" />
<div id="info2" name="info1"> </div>
</div>