[Dúvida] Desenvolvimento Base da Função Alugar/Devolver

/** * Função para alternar o status de aluguel de um jogo (Toggle). * Ela recebe o 'id' do jogo clicado (ex: 1, 2 ou 3) direto do HTML. */ function alterarStatus(id) { // 1. CAPTURAR OS ELEMENTOS HTML // Usamos a crase (Template String) para juntar a palavra "game-" com o número do id. // Isso captura a tag <li> inteira (o cartão do jogo específico). let cartaoJogo = document.getElementById(`game-${id}`); // O querySelector procura a primeira tag específica DENTRO do elemento 'cartaoJogo'. // Aqui estamos pegando a tag <a> (o botão) que pertence apenas a este jogo. let botao = cartaoJogo.querySelector('a'); // Aqui estamos pegando a primeira tag <div> (que é a caixa que guarda a imagem do jogo). let caixaImagem = cartaoJogo.querySelector('div'); // 2. LÓGICA DE ALTERNÂNCIA (TOGGLE) // O classList.contains verifica se o botão tem a classe específica de "jogo alugado". if (botao.classList.contains('dashboard__item__button--return')) { // --- SE JÁ ESTIVER ALUGADO (Ação: Devolver) --- // Remove a classe que deixa o botão escuro botao.classList.remove('dashboard__item__button--return'); // Muda o texto interno da tag <a> de volta para "Alugar" botao.textContent = "Alugar"; // Remove a classe que deixa a imagem do jogo escura caixaImagem.classList.remove("dashboard__item__img--rented"); } else { // --- SE ESTIVER DISPONÍVEL (Ação: Alugar) --- // Adiciona a classe que deixa o botão escuro (estilo de devolução) botao.classList.add('dashboard__item__button--return'); // Muda o texto interno da tag <a> para "Devolver" botao.textContent = "Devolver"; // Adiciona a classe que aplica o filtro escuro na imagem do jogo caixaImagem.classList.add("dashboard__item__img--rented"); } }

Oii, Lucas!

Que bom ver que você já avançou no desafio e estruturou o código da função alterarStatus. Sua lógica de alternância (o famoso toggle) está muito bem organizada e os comentários explicam detalhadamente cada passo, o que ajuda bastante no aprendizado.

Você utilizou o document.getElementById com Template Strings (as crases ```). Essa é uma prática excelente, pois permite que a função seja genérica. Não importa se o jogo é o 1, 2 ou 10; ao passar o id como parâmetro, o JavaScript consegue localizar exatamente qual elemento da lista deve ser alterado.

Entendendo a Lógica de Condicionais:

O uso do classList.contains é o ponto central aqui. Ele funciona como uma pergunta para o navegador: "Este elemento possui esta característica visual específica?".

Se sim (verdadeiro): O código entende que o jogo está alugado e executa a devolução, removendo as classes de estilo e alterando o texto.
Se não (falso): O código entende que o jogo está disponível e aplica o status de alugado.

Sugestão de prática extra:

Se você quiser levar esse desafio um pouco além, tente adicionar uma confirmação antes de devolver um jogo. Isso ajuda a treinar o uso de janelas de diálogo. Você poderia envolver a parte da devolução em um bloco como este:

if (confirm("Você tem certeza que deseja devolver este jogo?")) {
    // Coloque aqui o código que remove as classes e muda o texto
}

Isso garante que o usuário não clique por acidente e perca a informação de que o jogo estava com ele.

O seu caminho está excelente. Continue praticando esses conceitos, pois eles são a base para qualquer aplicação interativa na web.

Conteúdos relacionados

Confirmação da janela()

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

[Dúvida] Desenvolvimento Base da Função Alugar/Devolver

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