Quando eu clica-se em alguma dessas latas o background ia mudar de cor e a lata principal também :
Só que o background da segunda section não esta mudando de cor(E ela tem a mesma
class
) :
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" })
latasDeRefri[0]
isso aqui, assim como os outros, usando o índice zero vai alterar só o primeiro item