Minha versão

No HTML.

<li class="dashboard__items__item" id="game-1">
  <div class="dashboard__item__img">
    <img src="img/monopoly.png" alt="Capa jogo Monopoly">
  </div>
  <p class="dashboard__item__name">Monopoly</p>
  <a onclick="alterarStatus(1)" href="#" class="dashboard__item__button">Alugar</a>
</li>

Problemas:

O botão tinha onclick="alterarStatus(1)", e se você quisesse que a imagem também clicasse, teria que repetir outro onclick.
Cada card precisava de múltiplos onclick para funcionar em qualquer elemento.
Isso deixava o HTML mais poluído e repetitivo.

Pontos na minha opinião importante

HTML simplificado para “clicar no card todo.

<li class="dashboard__items__item" id="game-1">
  <div class="dashboard__item__img">
    <img src="img/monopoly.png" alt="Capa jogo Monopoly">
  </div>
  <p class="dashboard__item__name">Monopoly</p>
  <a href="#" class="dashboard__item__button">Alugar</a>
</li>

O que mudou:

Removemos todos os onclick do HTML.
O botão não precisa mais do onclick.
Agora o JavaScript adiciona um listener de clique no <li> inteiro, então qualquer clique dentro do card aciona a função.

Vantagens:
- HTML fica limpo e mais fácil de manter.
- Qualquer elemento dentro do card (imagem, nome, botão) dispara a mesma função.
- Menos repetição, menos chance de erro.

Classe app.js

document.querySelectorAll(".dashboard__items__item").forEach((card) => {
  card.addEventListener("click", function (event) {
    // evita que o link "#" role a página
    event.preventDefault();

    const imagem = card.querySelector(".dashboard__item__img");
    const botao = card.querySelector(".dashboard__item__button");

    // alterna classes
    if (imagem.classList.contains("dashboard__item__img--rented")) {
      imagem.classList.remove("dashboard__item__img--rented");
      botao.classList.remove("dashboard__item__button--return");
      botao.textContent = "Alugar";
    } else {
      imagem.classList.add("dashboard__item__img--rented");
      botao.classList.add("dashboard__item__button--return");
      botao.textContent = "Devolver";
    }
  });
});

Pontos que, na minha opinião, são importantes: sempre que clicava, a página rolava para o topo event.preventDefault(); impede essa ação // evita que o link "#" role a página. Outro ponto desconfortável é que, ao atualizar a página, a seleção é resetada. Para manter o estado, teríamos que armazenar os dados, mas essa função fica para os próximos capítulos.

Oi, Claudeny! Como vai?

Achei muito interessante a forma como você simplificou o HTML removendo os vários onclick e centralizando a lógica no JavaScript usando addEventListener. Isso realmente deixa o código mais organizado e fácil de manter. Outro ponto importante foi o uso de event.preventDefault() para evitar que o link # faça a página rolar para o topo, o que mostra sua atenção ao comportamento da interface e à experiência de quem usa a aplicação.

Uma dica interessante para o futuro é utilizar o método toggle() da propriedade classList, que pode simplificar a alternância de classes no código.

Veja este exemplo:


const botao = document.querySelector(".botao");

botao.addEventListener("click", function(){
  botao.classList.toggle("ativo");
});

Nesse exemplo, o código adiciona ou remove automaticamente a classe ativo sempre que o botão for clicado, evitando a necessidade de usar if para verificar se a classe já existe.

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

Trilhas por carreira

Carreiras de IA

Carreiras de Dados

Carreiras de Cyber

Carreiras de DevOps & Cloud

Carreiras de UX & UI

Carreiras de Mobile & Front-End

Carreiras de Back-End

Carreiras de Negócios

Cursos universitários FIAP

Tópicos relacionados

Conteúdos Alura com o tema