12

Hace poco estaba en mi curso de JavaScript y me mandaron a hacer un ejercicio en cuestion, como este:

Crea una página que muestre cinco cuadrados pequeños de diferentes colores y un cuadrado grande. Cuando el ratón pase por encima de alguno de ellos, el color de fondo del cuadrado grande será del color de relleno del cuadrado pequeño.

El problema está en que según yo he escrito bien el codigo pero no funciona, dejo mi codigo a continuación:

div {
  width: 50px;
  height: 50px;
  border: 1px solid black;
  display: inline-block;
}

#rojo { background-color: red; }
#azul { background-color: blue; }
#amarillo { background-color: yellow; }
#verde { background-color: green; }
#marron { background-color: brown; }

#CajaCambiante {
  width: 200px;
  height: 200px;
  display: block;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ejercicio 2</title>
  <link rel="stylesheet" href="main.css">
  <script>
    function cambio(e) {
      bg = e.style.backgroundColor;
      document.getElementById('CajaCambiante').style.backgroundColor = bg;
    }
  </script>
</head>

<body>
  <div id="rojo" onmouseover="cambio(this)"></div>
  <div id="azul" onmouseover="cambio(this)"></div>
  <div id="amarillo" onmouseover="cambio(this)"></div>
  <div id="verde" onmouseover="cambio(this)"></div>
  <div id="marron" onmouseover="cambio(this)"></div>
  <div id="CajaCambiante"></div>
</body>

</html>

¿Alguien puede decirme donde he fallado?

5
  • ¿Puedes agregar una imagen de pantalla del error o comportamiento inadecuado? Commented el 25 feb. 2021 a las 15:49
  • simplemente no cambia de color, no hace nada, y no me marca ni error ni nada
    – kian 14
    Commented el 25 feb. 2021 a las 15:50
  • ¿Cuál es el error o problema? Decir no funciona no es de mucha ayuda. Por favor leer Cómo preguntar. Saludos Commented el 25 feb. 2021 a las 15:57
  • fallaste por que no funciona
    – user46896
    Commented el 12 mar. 2021 a las 18:58
  • que ha hecho para verificar que error puede tener??
    – user46896
    Commented el 12 mar. 2021 a las 19:00

3 respuestas 3

11

La función se ejecuta correctamente, pero hay un problema aquí:

bg = e.style.backgroundColor;

El problema es que e.style.backgroundColor va a funcionar sólo si tienes los estilos inline, pero viendo tu código, ese no es el caso. Pon los estilos en la propia etiqueta o usa data-atributos para solucionar eso.

Ésta sería una manera de solucionar el problema corrigiendo el punto de arriba (poniendo los estilos directamente en la etiqueta):

div {
  width: 50px;
  height: 50px;
  border: 1px solid black;
  display: inline-block;
}

#rojo { background-color: red; }
#azul { background-color: blue; }
#amarillo { background-color: yellow; }
#verde { background-color: green; }
#marron { background-color: brown; }

#CajaCambiante {
  width: 200px;
  height: 200px;
  display: block;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ejercicio 2</title>
  <link rel="stylesheet" href="main.css">
  <script>
    function cambio(e) {
      const bg = e.style.backgroundColor;
      document.getElementById('CajaCambiante').style.backgroundColor = bg;
    }
  </script>
</head>

<body>
  <div id="rojo" onmouseover="cambio(this)" style="background-color: red"></div>
  <div id="azul" onmouseover="cambio(this)" style="background-color: blue"></div>
  <div id="amarillo" onmouseover="cambio(this)" style="background-color: yellow"></div>
  <div id="verde" onmouseover="cambio(this)" style="background-color: green"></div>
  <div id="marron" onmouseover="cambio(this)" style="background-color: brown"></div>
  <div id="CajaCambiante"></div>
</body>

</html>


Probablemente los data-atributos son una mejor opción y mantendría el código más limpio. En lugar de poner style="background-color: red; harías data-color="red". Y en JavaScript lo leerías así: e.dataset.color.

3
  • 4
    Buenísima respuesta! Commented el 25 feb. 2021 a las 16:07
  • 2
    muchas gracias!!!
    – kian 14
    Commented el 25 feb. 2021 a las 16:07
  • Perfecto, aunque no es mi ejercicio, aprendí al copiarlo a code pen y analizarlo. Commented el 24 mar. 2021 a las 17:18
7

Probablemente, la opción más fácil sería usar clases en lugar de ID y solo necesitas asignar al contenedor la clase del elemento que disparó el evento:

div {
  width: 50px;
  height: 50px;
  border: 1px solid black;
  display: inline-block;
}

.rojo { background-color: red; }
.azul { background-color: blue; }
.amarillo { background-color: yellow; }
.verde { background-color: green; }
.marron { background-color: brown; }

#CajaCambiante {
  width: 200px;
  height: 200px;
  display: block;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ejercicio 2</title>
  <link rel="stylesheet" href="main.css">
  <script>
    function cambio(element) {
      document.getElementById('CajaCambiante').className = element.className;
    }
  </script>
</head>

<body>
  <div class="rojo" onmouseover="cambio(this)"></div>
  <div class="azul" onmouseover="cambio(this)"></div>
  <div class="amarillo" onmouseover="cambio(this)"></div>
  <div class="verde" onmouseover="cambio(this)"></div>
  <div class="marron" onmouseover="cambio(this)"></div>
  <div id="CajaCambiante"></div>
</body>

</html>

4

Otra manera de hacerlo es a través de la función getComputedStyle() del objeto window. Esta función si que nos devuelve los estilos que estén afectando al elemento, aunque estos no se encuentren en línea.

.cuadrado {
  width: 50px;
  height: 50px;
  border: 1px solid black;
  display: inline-block;
}

#rojo { background-color: red; }
#azul { background-color: blue; }
#amarillo { background-color: yellow; }
#verde { background-color: green; }
#marron { background-color: brown; }

#CajaCambiante {
  width: 200px;
  height: 200px;
  display: block;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ejercicio 2</title>
  <link rel="stylesheet" href="main.css">
  <script>
    function cambio(e) {
      let bg = window.getComputedStyle(e, null).getPropertyValue("background-color");
      document.getElementById('CajaCambiante').style.backgroundColor = bg;
    }
  </script>
</head>

<body>
  <div id="rojo" class="cuadrado" onmouseover="cambio(this)"></div>
  <div id="azul" class="cuadrado" onmouseover="cambio(this)"></div>
  <div id="amarillo" class="cuadrado" onmouseover="cambio(this)"></div>
  <div id="verde" class="cuadrado" onmouseover="cambio(this)"></div>
  <div id="marron" class="cuadrado" onmouseover="cambio(this)"></div>
  <div id="CajaCambiante"></div>
</body>

</html>

Referencia: getComputedStyle()

1
  • 2
    Sé que llego un poco tarde, pero aquí un consejo: te podrías ahorrar window.getComputedStyle(...) con solo poner getComputedStyle(...), pues cada elemento que contenga window tiene su alcance por si solo sin depender de window (lo puedes comprobar con window.getComputedStyle === getComputedStyle // true)
    – Rodrigo
    Commented el 16 mar. 2021 a las 3:47

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.