When I put the class in the first <Section> it works , but in the second <Section> (with the same class) the effect does not work - Javascript

Asked

Viewed 46 times

0

  • When I click on any of these cans the background would change color and the main can too :

    inserir a descrição da imagem aqui

  • Only that the background of the second Section is not changing color(And it has the same class) : inserir a descrição da imagem aqui

Obs : I want the upper class to be the same color as the lower class.

  • HTML

<!--Primeira <section>  -->
<section class="corDeFundo">
    
</section>
<!-- Segunda <Section>-->
<section class="corDeFundo">
    <div class="produto" id="produto">
        <h1>produto</h1>
    </div>
</section>

  • Javascript(Full)

    const corDeFundo = document.querySelector(".corDeFundo")
  const latasDeRefri = document.querySelectorAll(".latasDeRefri li")
  const pepsiPrincipal = document.querySelector(".pepsi")

  latasDeRefri[0].addEventListener("click",()=>{
      pepsiPrincipal.src = "imagem/pepsi1.png"
      corDeFundo.style.background = "#004999"
      corDeFundo.style.transition = "0.5s"
  })
  latasDeRefri[1].addEventListener("click",()=>{
      pepsiPrincipal.src = "imagem/pepsi2.png"
      corDeFundo.style.background = "#ED0223"
      corDeFundo.style.transition = "0.5s"
  })
  latasDeRefri[2].addEventListener("click",()=>{
      pepsiPrincipal.src = "imagem/pepsi3.png"
      corDeFundo.style.background = "#191C1E"
      corDeFundo.style.transition = "0.5s"
  })
javascript html

  • uses the browser tool to investigate which method is setting the background, it would not be a div inside it, like the div with id "product"?

  • I looked here , and what is defining the color is the class="corDeFundo", only that the effect is only applied in the first <Section class="corDeFundo">, and the effect has to be applied in the second <Section> with the same class.

  • I put the full html, take a look now

  • latasDeRefri[0] this here, just like the others, using the zero index will change only the first item

  • latasDeRefri[0] will take the first can(Blue) and put as main and change the background color to blue , what is wrong ?

  • if you only have these elements no problem. Now as for the background, you are using the selector document.querySelector that brings 1 element, that is, will only change the first element with the class "corDeFundo", should use querySelectorAll and change all

  • really that’s it, THANK YOU!!! but how do I get all the items in the array ? (I did it using FOR, but if there’s another way comments on the answer to the question) , Obs: If you can give like in the question I thank you

Show 2 more comments

1 answer

1


Answering the last comment, you need to use the querySelectorAll, that returns an array of objects.

Need to iterate over each element, can be done with for, foreach, etc. I usually use it like this, it’s simple and clear:

const corDeFundo = document.querySelectorAll(".corDeFundo")

...

corDeFundo.forEach((elemento) => {
    elemento.style.background = "#191C1E"
    elemento.style.transition = "0.5s"
});

Or so:

for (const elemento of corDeFundo) {
  elemento.style.background = "#191C1E"
  elemento.style.transition = "0.5s"
}

But this for is not compatible with some older versions of browser, please confirm: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of

Browser other questions tagged javascript html

You are not signed in. Login or sign up in order to post.