Skip to main content
se eliminaron 3 caracteres en el cuerpo
Origen Enlace
const radioButtons = document.getElementsByName('color_fondo'); // Seleccionamos los RadioButtons
const selectBox = document.querySelector('#border_1') // Seleccionamos el selectbox

radioButtons.forEach((element, index) => { // Iteramos sobre ellos
    element.addEventListener('change', () => { // Añadimos un eventListener con la función que sea que queramos que se ejecute

        const backgroundColor = element.value;

        document.getElementByIdquerySelectorAll('div1''#info1, #info2').forEach(target => {
            target.style.backgroundColor = element.value;backgroundColor; // cambiamosCambiamos el color de #border_1fondo.
 con el valor del input seleccionado      if (target.id === 'info1') {
                target.value = backgroundColor;
            } else {
                target.innerText = backgroundColor;
            }
        });

    });
});

selectBox.addEventListener('change', () => {

    const stylesValues = {
        backgroundColor: selectBox.value.split('|')[0],
        borderColor: selectBox.value.split('|')[1]
    };

    document.querySelectorAll('#info1, #info2').forEach(target => {
        target.style.backgroundColor = stylesValues.backgroundColor;
        target.style.borderColor = stylesValues.borderColor;

    });
});
#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>
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('div1').style.backgroundColor = 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>
const radioButtons = document.getElementsByName('color_fondo'); // Seleccionamos los RadioButtons
const selectBox = document.querySelector('#border_1') // Seleccionamos el selectbox

radioButtons.forEach((element, index) => { // Iteramos sobre ellos
    element.addEventListener('change', () => { // Añadimos un eventListener con la función que sea que queramos que se ejecute

        const backgroundColor = element.value;

        document.querySelectorAll('#info1, #info2').forEach(target => {
            target.style.backgroundColor = backgroundColor; // Cambiamos el color de fondo.
            if (target.id === 'info1') {
                target.value = backgroundColor;
            } else {
                target.innerText = backgroundColor;
            }
        });

    });
});

selectBox.addEventListener('change', () => {

    const stylesValues = {
        backgroundColor: selectBox.value.split('|')[0],
        borderColor: selectBox.value.split('|')[1]
    };

    document.querySelectorAll('#info1, #info2').forEach(target => {
        target.style.backgroundColor = stylesValues.backgroundColor;
        target.style.borderColor = stylesValues.borderColor;

    });
});
#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>
se eliminaron 3 caracteres en el cuerpo
Origen Enlace

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''div1').style.borderColorbackgroundColor = 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>

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>

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('div1').style.backgroundColor = 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>

Origen Enlace

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>