Question 196375 in Html Question posted in
Some basic documentation can be found here.

Html – User change style with input type color

I’m trying to make something that the user select a color with the first input and it changes the background color of the body, and when the user select a color in the second input should change only the background color of the main, but the second input isn’t working at all. Can someone help me?

    const ColorPicker  = document.querySelector("#input1");
const ColorCode = document.querySelector("#input1").value;
const Body = document.querySelector("#fundoPagina");

const ColorPicker2  = document.querySelector("#input2");
const ColorCode2 = document.querySelector("#input2").value;
const fundoCaixa = document.querySelector("#fundoCaixa");


// Change color function
const changeColor = (evt) => {
  const selectedColor = evt.currentTarget.value;
  ColorCode.value = selectedColor;
  Body.style.backgroundColor = selectedColor;
};

const changeColor2 = (evt) => {
    const selectedColor2 = evt.currentTarget.value;
    ColorCode2.value = selectedColor2;
    fundoCaixa.style.backgroundColor = selectedColor2;
};

// Add the Event to your input
ColorPicker .addEventListener("input", changeColor);
ColorPicker2 .addEventListener("input", changeColor);
    .inputContent {
    display: flex; 
    text-align:center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px;
    border: 2px solid rgb(66, 66, 66);
    max-width: 890px;
    margin: 0 auto;
    padding: 5px 15px;
    background: rgb(219, 219, 219);
}

#inputColor {
    display: flex;
    flex-direction: column!important;
    align-items: center;
}

#inputColor>p {
    font-size: 12px;
}

#fundoCaixa {
    max-width: 890px;
    margin: 0 auto;
    border: 2px solid rgb(66, 66, 66);
    margin-top: 15px;
    background: rgb(89, 156, 187);
    padding: 5px 15px;
}
<body id="fundoPagina">
    <div class="inputContent">
        <div id="inputColor"><input type="color" value="#000" id="input1"></input><p>Cor do fundo da página</p></div>
        <div id="inputColor"><input type="color" value="#000" id="input2"></input><p>Cor do fundo do texto</p></div>
    </div>
    <main id="fundoCaixa">
        <h1 id="tituloPrincipal">Linguagens de Programação</h1>
        <p id="paragrafo">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsum nihil incidunt sint laudantium est earum optio ducimus in facilis quisquam. Tempore iste dignissimos.</p>
</main>
</body>
Tags:

2

Answers


  1. 0 
    // Add the Event to your input
ColorPicker .addEventListener("input", changeColor); //run changeColor function
ColorPicker2 .addEventListener("input", changeColor2); //run changeColor2 function

    you forgot to add the 2, you’re attempting to run the changeColor function on both event listeners.

    Login or Signup to reply.
  2. 0 
    // Add the Event to your input
ColorPicker.addEventListener("input", changeColor);
ColorPicker2.addEventListener("input", changeColor2);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search