3

Hola estoy aprendiendo JavaScript y tengo problema con el siguiente ejercicio dentro de mi html tengo mis ID el cual tienen el nombre de colores rojo y azul.

y dentro de mi JS tengo mi siguiente línea de código.

const redButton = document.getElementById('redButton');
const blueButton = document.getElementById('blueButton');

redButton.addEventListener('click', (e) => {
  const colorSquare = document.getElementById('colorDiv');
  colorSquare.style.backgroundColor = 'red';
});

blueButton.addEventListener('click', (e) => {
  colorSquare.style.backgroundColor = 'blue';
})

Lo que quiero es que al momento de hacer click en el botón red, el ID colorDiv cambie de color a rojo y cuando se haga click en el botón azul cambie el color a azul.

Yo creo que la forma para esto es con condicionales if y else, pero no se como declararlo para que se efectúe este evento.

2 respuestas 2

5

No podías visualizar los cambios por que tu div no tenía tamaño alguno.

Código:

const redButton = document.getElementById('redButton');
const blueButton = document.getElementById('blueButton');
const colorSquare = document.getElementById('colorDiv');
redButton.addEventListener('click', (e) => {
    colorSquare.style.backgroundColor = 'red';
});
blueButton.addEventListener('click', (e) => {
    colorSquare.style.backgroundColor = 'blue';
});
#colorDiv{
    width:10px;
    height:10px;
}
<button type="button" id="redButton">Click Me!</button>
<button type="button" id="blueButton">Click Me!</button>
<div id="colorDiv"></div>

Ahora sobre tu duda:

¿Esto también se podría haber solucionado con condicionales if y else?

Nótese que en este ejemplo se necesita de una variable para poder cumplir con las condiciones de if y else.

Para probar el ejemplo, debes modificar el valor de la variable n, y recién verás cambios de colores.

var n = 30;//cambia el valor y veras cambios en el color del div

if (n >= 60)
{
    document.getElementById("miDiv").style.backgroundColor = 'red';
}
else  
if (n >= 41 && n <50)  
{
    document.getElementById("miDiv").style.backgroundColor = 'black';
}  
else  
if (n <=40)  
{
    document.getElementById("miDiv").style.backgroundColor = 'blue';
}
#miDiv{
    width:100px;
    height:100px;
}
<div id="miDiv">
</div>

4
  • 2
    Muchas gracias por tu ayuda, me sirvió de mucho, solo quisiera comentare esto también se podría haber solucionado con condicionales if y else ? Commented el 12 ene. 2017 a las 1:07
  • @PoloMoreno la logica para este tipo de efectos es distinta a programacion a objetos, ya que se trata de eventos de usuario, talves se podria hacer, pero no seria la manera mas adecuada. Commented el 12 ene. 2017 a las 1:10
  • @PoloMoreno espera te muestro con otro ejemplo como seria con if else, te servira para diferenciar la logica Commented el 12 ene. 2017 a las 1:14
  • @PoloMoreno te deje otro ejemplo en una nueva respuesta. Commented el 12 ene. 2017 a las 1:25
1

Como muy bien te ha comentado @x-rw, lo que le falta a tu código para que se vea el cambio de color de fondo de tu div es asignarle un tamaño.

Sin embargo, me gustaría darte una recomendación: no cambies los estilos directamente con el atributo style de Javascript, si no que usa clases en su defecto, las cuales también puedes cambiar desde Javascript.

¿Por qué no hacerlo con el atributo style?

Porque si tu utilizas:

colorSquare.style.backgroundColor = 'blue';

lo que estás haciendo en realidad es esto:

<div id="colorDiv" style="background-color: blue"></div>

Según la especificidad de CSS, los estilos inline añadidos a un elemento (p.e., style="font-weight:bold") siempre sustituyen a cualquier estilo escrito en hojas de estilo externas, o lo que es lo mismo, si tienes una clase o un ID sobreescribiendo este estilo, no vas a poder, ya que los estilos inline son los que tienen una mayor especificidad.

Por lo tanto, te recomiendo usar clases en su defecto y cambiarlas mediante Javascript.

  • Para añadir una clase a un elemento:

    colorSquare.classList.add("rojo");
    
  • Para quitar una clase a un elemento:

    colorSquare.classList.remove("rojo");
    

Tu ejemplo modificado:

const redButton = document.getElementById('redButton');
const blueButton = document.getElementById('blueButton');
const colorSquare = document.getElementById('colorDiv');
redButton.addEventListener('click', (e) => {
    colorSquare.classList.remove("azul");
    colorSquare.classList.add("rojo");
});
blueButton.addEventListener('click', (e) => {
    colorSquare.classList.remove("rojo");
    colorSquare.classList.add("azul");
});
#colorDiv{
   width:10px;
   height:10px;
}

.azul{
   background-color: blue;
}

.rojo{
   background-color: red;
}
<button type="button" id="redButton">Click Me!</button>
<button type="button" id="blueButton">Click Me!</button>
<div id="colorDiv"></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.