0
  • Quando eu clica-se em alguma dessas latas o background ia mudar de cor e a lata principal também :

    inserir a descrição da imagem aqui

  • Só que o background da segunda section não esta mudando de cor(E ela tem a mesma class) : inserir a descrição da imagem aqui

Obs : eu quero que a classe de cima fica com a mesma cor da classe debaixo.

  • HTML

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

  • JavaScript(Completo)

    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"
      })
    
7
  • usa a ferramenta do navegador pra investigar qual elemeto está definindo o background, não seria uma div dentro dela, como a div com id "produto"? 20/01/2021 às 10:38
  • Olhei aqui , e o que está definindo a cor é a class="corDeFundo", só que o efeito só é aplicado na primeira <section class="corDeFundo">, e o efeito tem que ser aplicado na segunda <section> com a mesma classe. 20/01/2021 às 10:43
  • Coloquei o html completo , da uma olhada agora 20/01/2021 às 10:53
  • latasDeRefri[0] isso aqui, assim como os outros, usando o índice zero vai alterar só o primeiro item 20/01/2021 às 11:03
  • latasDeRefri[0] vai pegar a primeira lata(Azul) e colocar como principal e alterar a cor de fundo para azul , o que está errado ? 20/01/2021 às 11:21

1 Resposta 1

1

Respondendo o ultimo comentário, precisa então usar o querySelectorAll, que retornar um array de objetos.

Precisa iterar sobre cada elemento, pode ser feito com for, foreach, etc. Eu costumo usar assim, é simples e claro:

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

...

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

Ou assim também:

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

Porém esse for não é compatível com algumas versões mais antigas de navegador, convém confirmar: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of

1

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .