- 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áginarolava para o topo event.preventDefault(); impede. 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.
