Html - How to select multiple elements with queryselector

Awa
June 29, 2023
112 views
0 votes
2 Answers

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 "Subtitles color" input it should change the color of both , but the second isn’t changing the color. Can someone help me? I have tried using getElementById and getElementsByClassName and it won’t even select the first child.

const ColorPicker  = document.querySelector("#input1");
const ColorCode = document.querySelector("#input1").value;
const Body = document.querySelector("#fundoPagina");
        
const ColorPicker4  = document.querySelector("#input4");
const ColorCode4 = document.querySelector("#input4").value;
const subtitulo = document.querySelector("h2");
        
        
        // Change color function
        const changeColor = (evt) => {
          const selectedColor = evt.currentTarget.value;
          ColorCode.value = selectedColor;
          Body.style.backgroundColor = selectedColor;
        };
        
        const changeColor4 = (evt) => {
        const selectedColor4 = evt.currentTarget.value;
        ColorCode4.value = selectedColor4;
        subtitulo.style.color = selectedColor4;
    };
        
        // Add the Event to your input
        ColorPicker .addEventListener("input", changeColor);
        ColorPicker4 .addEventListener("input", changeColor4);

    .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="input4"></input><p>Subtitles Color</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>
    <h2 id="linguagemC" class="subtitulo">Linguagem C</h2>
    <h2 id="linguagemPascal" class="subtitulo">Linguagem Pascal</h2>

</main>
</body>

const ColorPicker  = document.querySelector("#input1");
const ColorCode = document.querySelector("#input1").value;
const Body = document.querySelector("#fundoPagina");
        
const ColorPicker4  = document.querySelector("#input4");
const ColorCode4 = document.querySelector("#input4").value;
const subtitulo = document.querySelector("h2");
        
        
        // Change color function
        const changeColor = (evt) => {
          const selectedColor = evt.currentTarget.value;
          ColorCode.value = selectedColor;
          Body.style.backgroundColor = selectedColor;
        };
        
        const changeColor4 = (evt) => {
        const selectedColor4 = evt.currentTarget.value;
        ColorCode4.value = selectedColor4;
        subtitulo.style.color = selectedColor4;
    };
        
        // Add the Event to your input
        ColorPicker .addEventListener("input", changeColor);
        ColorPicker4 .addEventListener("input", changeColor4);

    .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="input4"></input><p>Subtitles Color</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>
    <h2 id="linguagemC" class="subtitulo">Linguagem C</h2>
    <h2 id="linguagemPascal" class="subtitulo">Linguagem Pascal</h2>

</main>
</body>

Answers

I made some minor change in your code.
that change highlighted with <-- edit

const ColorPicker  = document.querySelector("#input1");
const ColorCode = document.querySelector("#input1").value;
const Body = document.querySelector("#fundoPagina");
        
const ColorPicker4  = document.querySelector("#input4");
const ColorCode4 = document.querySelector("#input4").value;
const subtitulo = document.querySelectorAll("h2"); //<-- edit
 
        const changeColor = (evt) => {
          const selectedColor = evt.currentTarget.value;
          ColorCode.value = selectedColor;
          Body.style.backgroundColor = selectedColor;
        };
        
        const changeColor4 = (evt) => {
        const selectedColor4 = evt.currentTarget.value;
        ColorCode4.value = selectedColor4;
        subtitulo.forEach( h => h.style.color = selectedColor4  ) //<-- edit
    };
        
        // Add the Event to your input
        ColorPicker .addEventListener("input", changeColor);
        ColorPicker4 .addEventListener("input", changeColor4);

.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="input4"></input><p>Subtitles Color</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>
    <h2 id="linguagemC" class="subtitulo">Linguagem C</h2>
    <h2 id="linguagemPascal" class="subtitulo">Linguagem Pascal</h2>

</main>
</body>

Try querySelectorAll

querySelectorAll will get a nodelist, use foreach to change style for all of selected elements.

And you actually only need one function to do this, you can change the style attribute and selected element by data-attribute in <input/>.

const colorPickers = document.querySelectorAll('input')
colorPickers.forEach(colorPicker => {
  colorPicker.addEventListener('input', ({
    target
  }) => {
    const value = target.value
    const elements = target.getAttribute('data-element')
    const style = target.getAttribute('data-style')
    document.querySelectorAll(elements).forEach(elem => {
      elem.style[style] = value
    })
  })
})

.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><input type="color" value="#000" data-element="body" data-style="backgroundColor" />
      <p>Cor do fundo da página</p>
    </div>
    <div><input type="color" value="#000" data-element="h2" data-style="color" />
      <p>Subtitles Color</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>
    <h2 id="linguagemC" class="subtitulo">Linguagem C</h2>
    <h2 id="linguagemPascal" class="subtitulo">Linguagem Pascal</h2>
  </main>
</body>

Please signup or login to give your own answer.

Click here to cancel reply.

Html – How to select multiple elements with queryselector

Answers