Entrar Ainda não tem acesso?
1
resposta

Gostaria de entender a preferência pelo metodo escolhido, e se isso faz parte de boas práticas de programação.

Referente ao curso Lógica de programação: praticando com desafios, no capítulo Projeto AluGames e atividade Faça como eu fiz: alugando e devolvendo jogos

por Paula Ferreira Rodrigues Galvão
| 6.6k xp | 2 posts

Olá, esse desafio foi muito difícil no começo de executar por pequenos erros que cometi, porém aos poucos com esses erros sendo corrigidos eu cheguei a um código diferente que funcionou. E gostaria de entender o motivo de porque usar o image.classList no if-else e não o button.classList.

Meus dois códigos que funcionaram, mas sao diferentes são esses: 

function changeStatus(id) {
    let gameClicked = document.getElementById(`game-${id}`);
    let image = gameClicked.querySelector('.dashboard__item__img');
    let button = gameClicked.querySelector('.dashboard__item__button');

if (button.classList.contains("dashboard__item__button--return")) {
      button.classList.remove("dashboard__item__button--return");
        image.classList.remove("dashboard__item__img--rented");
        button.textContent = "Rent";
    } else {
        button.classList.add("dashboard__item__button--return");
        image.classList.add("dashboard__item__img--rented");
        button.textContent = "Return";
  }
}

E

function changeStatus(id) {
    let gameClicked = document.getElementById(`game-${id}`);
    let image = gameClicked.querySelector('.dashboard__item__img');
    let button = gameClicked.querySelector('.dashboard__item__button');

   button.classList.toggle('dashboard__item__button--return')
   image.classList.toogle("dashboard__item__img--rented")
   button.textContent = button.textContent == "Rent" ? "Return" : "Rent";
  }
}
1 resposta
por Lorena Garcia
| 10549.4k xp | 15690 posts
Alura Scuba Team

Oii, tudo bem?

Ótima pergunta, Paula! É muito bom quando você compara soluções diferentes que funcionam e quer entender qual é a mais adequada.

Qual a diferença entre usar image.classList ou button.classList no if?

O código sugerido pelo instrutor verifica se a imagem do jogo contém a classe dashboard__item__img--rented pra decidir se o jogo tá alugado ou não. Já o seu código verifica se o botão tem a classe dashboard__item__button--return.

Ambos funcionam, porque os dois elementos estão sincronizados no visual: quando a imagem tem a classe de "alugado", o botão também muda de aparência. Mas usar a imagem como base tem uma pequena vantagem em termos de clareza de intenção e boas práticas.

Por que usar image.classList.contains(...) é preferido aqui?

  1. Responsabilidade clara de cada elemento:

    • A imagem é o que representa visualmente o estado do jogo (alugado ou não).
    • O botão é apenas uma forma de interação para mudar esse estado.
    • Por isso, faz mais sentido verificar o estado da imagem, que é o “dado principal” visual.

  2. Evita ambiguidade futura:

    • Pode acontecer de o botão mudar por outros motivos (ex: estilo, acessibilidade).
    • Já a classe na imagem é usada apenas para mostrar se o jogo tá alugado ou não, então é mais seguro basear a lógica nela.

E sobre o seu segundo código com toggle?

O uso de classList.toggle e o textContent com ternário é uma solução válida, prática e enxuta, especialmente para códigos mais simples. Porém, ele exige mais cuidado, pois se algum estado sair de sincronia (por exemplo, o texto do botão estiver diferente por algum motivo), a lógica pode se confundir.

Para concluirmos, você está certa: os dois funcionam. Mas usar a imagem como base do estado, como no código sugerido pelo instrutor, é uma escolha mais clara e segura a longo prazo, por isso é considerado uma boa prática.

Espero ter te ajudado.

Alura Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!