Skip to main content
1 de 3

La gestión de eventos en JavaScript se hace a través del método .addEventListener(type, callback).

En este caso, lo que tú quieres hacer es llamar a una función que cambie el fondo, o los estilos de un elemento.

Además, cuando haces un getElementsBy... lo que te devuelve no es un objeto, sino un NodeList, sobre el que tendrías que iterar con el método .forEach() y operar.

Tu ejemplo sería algo así:

document.getElementsByName('color_fondo').forEach(element => {
  element.addEventListener('change', () => {
    // Aqui va lo que sea que quieras hacer
  })
});

De esta forma, te puedo dejar un ejemplo que podría servirte, basándome en el ejemplo que propones:

const radioButtons = document.getElementsByName('color_fondo'); // Seleccionamos los RadioButtons

radioButtons.forEach(element => { // Iteramos sobre ellos
  element.addEventListener('change', () => { // Añadimos un eventListener con la función que sea que queramos que se ejecute
    document.getElementById('border_1').style.borderColor = element.value; // cambiamos el color de #border_1 con el valor del input seleccionado
  })
});
#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">&nbsp;</div>
</div>