Minha solução. | JavaScript: manipulando o DOM | Alura

Encontrei uma solução diferente do instrutor. Além de adicionar mais dois botões que são [Mostrar apenas tintas externas] [Mostrar apenas tintas internas] Meu código não tem uma boa funcionalidade. Ele executa as funções porem para clicar em uma desses botões que citei acima, eu terei que que apagar a lista e executar. Agradeço quem puder dá um auxílio para melhorar o meu código.

function apagaTintas(){
    var cores = document.querySelectorAll("[cor]")

    cores.forEach((listaDeCores) =>{
     listaDeCores.classList ="apaga";

    })     
}

function mostraTintas(){
  var cores = document.querySelectorAll("[cor]")
  cores.forEach((coresLista) => {
    coresLista.classList ="this";   
  }) 
}

function tintaExternas(){
  var apagaListaInterna = document.querySelectorAll("[tipo = tinta-exterior]")


    apagaListaInterna.forEach((listaInterior) =>{
      listaInterior.classList = "this";

   })
}

function tintaInternas(){
  var apagaTintaExterna = document.querySelectorAll("[tipo = tinta-interior]")
    apagaTintaExterna.forEach((listaExterior) =>{
      listaExterior.classList ="this";

    })


}

Olá Karen, tudo bem?

Pelo que entendi do seu código, você está tentando criar botões para filtrar as tintas externas e internas. Uma sugestão para melhorar a funcionalidade do seu código seria criar uma função que verifica qual botão foi clicado e, a partir disso, chama a função correspondente.

Por exemplo, você poderia criar um evento de clique para cada botão e, dentro dele, verificar qual botão foi clicado e chamar a função correspondente. Dessa forma, você não precisaria apagar a lista e executar novamente toda vez que quisesse filtrar as tintas.

Segue um exemplo de como você poderia fazer isso:

var btnTintasExternas = document.getElementById("btn-tintas-externas");
var btnTintasInternas = document.getElementById("btn-tintas-internas");

btnTintasExternas.addEventListener("click", function() {
  tintaExternas();
});

btnTintasInternas.addEventListener("click", function() {
  tintaInternas();
});

function tintaExternas(){
  var apagaListaInterna = document.querySelectorAll("[tipo = tinta-exterior]")

  apagaTintas();

  apagaListaInterna.forEach((listaInterior) =>{
    listaInterior.classList = "this";          
  })
}

function tintaInternas(){
  var apagaTintaExterna = document.querySelectorAll("[tipo = tinta-interior]")

  apagaTintas();

  apagaTintaExterna.forEach((listaExterior) =>{
    listaExterior.classList ="this";      
  })
}

function apagaTintas(){
  var cores = document.querySelectorAll("[cor]")

  cores.forEach((listaDeCores) =>{
    listaDeCores.classList ="apaga";       
  })     
}

Nesse exemplo, eu criei duas variáveis para armazenar os botões de filtragem e adicionei um evento de clique para cada um deles. Dentro de cada evento, eu chamo a função correspondente e, antes disso, chamo a função "apagaTintas" para limpar a lista.

Espero que essa sugestão ajude a melhorar a funcionalidade do seu código. Qualquer dúvida, é só perguntar.

Espero ter ajudado e bons estudos!