1

Quiero colocar dos selectores de colores, y según el color seleccionado en la primera, cambie el fondo de pantalla y según el segundo selector cambie el color de texto de toda la página.

Aquí ya tengo para cambiar el fondo de pantalla pero no se ni he podido cambiar el color de texto de la página.

function cambiarColor(){
  var selectValue =       document.getElementById("colorch").value;   document.body.style.backgroundColor=selectValue;
}

function cambiarLetra(){
  var selectValue =       document.getElementById("colorle").value;   document.body.style.Color=selectValue;
}
<input type="color" id="colorch" onchange="cambiarColor();" />
<input type="color" id="colorle" onchange="cambiarLetra();" />

<h5>HOLA MUNDO</h5>

1 respuesta 1

1

Realiza estos 2 cambios para que tu código funcione:

  • Obtén la etiqueta h5 por medio de un querySelector, ya que no la estas seleccionando y por tanto es imposible aplicarle el color elegido
  • Corrige la propiedad CSS que tratas de modificar pues le colocaste la C en mayúscula y debe ser así: color

Tu código solo se debe ver modificado en la siguiente línea y quedar así:

document.querySelector("h5").style.color=selectValue;

Actualización

Si lo que deseas es aplicar este comportamiento a múltiples elementos, puedes seleccionarlos por medio de su etiqueta, clase o id con el método querySelectorAll() pasando separado por comas cada uno de los valores de este modo:

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <title>Ejemplo</title>
    </head>
    <body>
    <h1>Hola</h1>
    <h2>Hola 1</h2>
    <h3>Hola 2</h3>
    <script>
        let titulos = document.querySelectorAll("h1, h2, h3")
        titulos.forEach((elemento) => {
          console.log(elemento.innerText)
        })
    </script>
    </body>
    </html>

En este snippet, te muestro como obtener al mismo tiempo varias etiquetas de título, después como obtengo una lista de nodos entonces debo recorrerlas con un forEach y por ejemplo mando imprimir el innerText que me mostrará el texto contenido en cada uno de ellos.

2
  • Más tarde te contesto, pues no tengo una lap a la mano @MiguelPatiño
    – BetaM
    el 24 nov. 2019 a las 22:59
  • @MiguelPatiño listo agregué un ejemplo de guía
    – BetaM
    el 25 nov. 2019 a las 6:50

Tu Respuesta

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

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