3

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">&nbsp;</div>
</div>
    

2 respuestas 2

4

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
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>

1
  • 1
    Asignar la función a la propiedad onchange también funciona, pero sólo admite una función, mientras que con addEventListener puedes añadir múltiples listeners a un mismo evento y elemento. Commented el 11 jun. 2019 a las 13:18
1

Puedes aprovecharte del burbujeo para no tener que implementar el evento onchange en cada elemento. Solo tienes que implementarlo en el elemento padre y cada vez que presiones un hijo, el padre lo escuchara.

En el código html deje solo un valor en los items del select. En realidad no se por que pusiste dos valores separados por una raya vertical.

window.onload = function () {
  
  const radioButtonDiv = document.querySelector('#radio-buttons-div')
  const select = document.querySelector('#border_1');
  const div1 = document.querySelector('#div1');
  
  radioButtonDiv.onchange = (event) => {
    
      if (event.target.name == 'color_fondo') {
        div1.style.backgroundColor = event.target.value;
      }
  }
  
  select.onchange = (event) => {
      console.log(event.target.value);
      div1.style.border = `4px solid ${event.target.value}`;
  }
};
#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">
<div id="radio-buttons-div">
<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>
</div>

<select name="border_1" id="border_1">
<option value="#000" >Elige un color de borde (gris)</option>
<option value="cyan">Fondo Verde - Borde Cyan</option>
<option value="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>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.