Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

244
Visualizações
JavaScript switch divs by class list add,remove / toggle? how I can write better code?

I am a beginning programmer and I would like to ask how can I improve this code? I know it's bad because there are a lot of repetitions and I would like to know how I can make it effective?

Thank you for any advice :)

 const simple = document.querySelector(".simple");
const speedy = document.querySelector(".speedy");
const easy = document.querySelector(".easy");

const illustration1Img = document.querySelector(".illustration-1-img");
const illustration2Img = document.querySelector(".illustration-2-img");
const illustration3Img = document.querySelector(".illustration-3-img");

const illustration1 = document.querySelector(".illustration-1");
const illustration2 = document.querySelector(".illustration-2");
const illustration3 = document.querySelector(".illustration-3");


simple.addEventListener("click", function(){ 
    illustration1Img.classList.remove("hidden");
    illustration2Img.classList.add("hidden");
    illustration3Img.classList.add("hidden");

    illustration1.classList.remove("hidden");
    illustration2.classList.add("hidden");
    illustration3.classList.add("hidden");
});

speedy.addEventListener("click", function(){ 
    illustration1Img.classList.add("hidden");
    illustration2Img.classList.remove("hidden");
    illustration3Img.classList.add("hidden");

    illustration1.classList.add("hidden");
    illustration2.classList.remove("hidden");
    illustration3.classList.add("hidden");
});

easy.addEventListener("click", function(){ 
    illustration1Img.classList.add("hidden");
    illustration2Img.classList.add("hidden");
    illustration3Img.classList.remove("hidden");

    illustration1.classList.add("hidden");
    illustration2.classList.add("hidden");
    illustration3.classList.remove("hidden");
});
about 4 years ago · Juan Pablo Isaza
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda