1

Si el valor es azul que el style="background-color:" tenga el valor 0000FF, si es "rojo" tenga el valor FF0000.

<p id="color">Azul</p>

<script>
color = document.getElementById("color").innerHTML;
if (color == "azul"){
    document.getElementById("color").style.background-color = "#0000FF";
}
if (color == "rojo"){
    document.getElementById("color").style.background-color = "#FF0000";
}
</script>
5
  • ¿Qué es un typo?
    – ret
    Commented el 1 may. 2020 a las 13:08
  • Que escribiste algo mal, lo cual de hecho sigue presente en tu pregunta pues la condición a evaluar si se cumple o no en el if debe ir entre paréntesis
    – user128299
    Commented el 1 may. 2020 a las 13:10
  • Luego el último typo sería que el valor en hexadecimal que vas a asignar si la condición se cumple debe ir precedido por el símbolo de # y entre comillas asi "#0000FF"
    – user128299
    Commented el 1 may. 2020 a las 13:11
  • Muy amable BetaM
    – ret
    Commented el 1 may. 2020 a las 13:13
  • Por último la propiedad background color cuando la asignas mediante JS no va como en CSS sino que se escribe así: backgroundColor
    – user128299
    Commented el 1 may. 2020 a las 13:14

2 respuestas 2

4

Como ha dicho @BetaM hay que tener claro varios puntos:

  1. El operador "=" es una asignación y el operador "==" es la comparación y lo que tú necesitas para resolver este código.
  2. Para la asignación de colores hexadecimales debes hacerlo como el te indica: "#0000FF"
  3. La propiedad que necesitas para el color de fondo es: backgroundColor

<html>
    <body>
      <p id="color">Azul</p>

      <script>
        var color = document.getElementById("color").innerHTML;
        if (color == "Azul") {
          document.body.style.backgroundColor = "#0000FF";
        }
        if (color == "Rojo") {
          document.body.style.backgroundColor = "#FF0000";
        }
      </script>
    </body>
</html>

Para modificar el color de fondo del párrafo:

<html>
    <body>
      <p id="color">Azul</p>

      <script>
        var color = document.getElementById("color").innerHTML;
        if (color == "Azul") {
          document.getElementById("color").style.backgroundColor = "#0000FF";
        }
        if (color == "Rojo") {
          document.getElementById("color").style.backgroundColor = "#FF0000";
        }
      </script>
    </body>
</html>

3
  • Ese código cambia el color de fondo de todo el body. ¿Cómo sería para modificar el fondo de <p> cuyo id="color"? Gracias.
    – ret
    Commented el 1 may. 2020 a las 13:20
  • 1
    Te he dejado el snippet para cambiar el color de fondo del parrafo con id="color". Primero debes seleccionar el elemento que te interesa cambiar de fondo y luego aplicas los cambios que necesites sobre él.
    – Zur
    Commented el 1 may. 2020 a las 13:30
  • Es curioso que si tengo varios elementos con el id color, sólo se lo aplica al primero que encuentra. ¿Puede ser porque el concepto de id debe ser para un sólo elemento? Para multiples mejor utilizar class.
    – ret
    Commented el 1 may. 2020 a las 14:10
0

<html>
    <body>
      <p id="color">Azul</p>

<script>

    function cambiarColorFondo(cambiarColor) {
        let colores = document.getElementById("color");
        document.body.style.display="flex";
        document.body.style.justifyContent="center";
        colores.style.fontSize = "900%";
        colores.style.color="white";
        colores.textContent = cambiarColor;
        if (colores.textContent === "Azul") {
            document.body.style.backgroundColor = "#0000FF";
   
        } else if (colores.textContent === "Rojo") {
            document.body.style.backgroundColor = "#FF0000";
      
        }
    }

    cambiarColorFondo("Azul");//Con esta función puedes cambiar el color

</script>
    </body>
</html>

1
  • Básicamente he puesto textContent en vez de innerHTML para comparar el contenido del elemento colores con cadenas de texto Azul y Rojo . He mejorado un poquito para que se pueda ver el tamaño de la letra y el color adecuado. Si amigos, a veces soy exigente y no puedo evitar 🤣. Commented el 12 feb. a las 10:22

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.