Entrar Ainda não tem acesso?
1
resposta

Desafio

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

por Mario Rogério Amorim Melo
| 6.4k xp | 3 posts
function alterarStatus(gameId) {
const game = document.getElementById(`game-${gameId}`);
const button = game.querySelector('.dashboard__item__button');
const gameImage = game.querySelector('.dashboard__item__img');

if (button.classList.contains('dashboard__item__button--return')) {
    button.textContent = 'Alugar';
    button.classList.remove('dashboard__item__button--return');
    gameImage.classList.remove('dashboard__item__img--rented');

} else {
    button.textContent = 'Devolver';
    button.classList.add('dashboard__item__button--return');
    gameImage.classList.add('dashboard__item__img--rented');
}

}

1 resposta
por Luis Dias
| 3327.6k xp | 3663 posts
Developer PHP (⌐■_■)

Oi Mário, tudo bem? 😊

Sua função alterarStatus está muito bem estruturada e cumpre o objetivo de alternar o status de um jogo entre "Alugar" e "Devolver".

Vou detalhar o que cada parte do seu código faz para reforçar o seu entendimento. 📚

A função alterarStatus recebe um gameId como parâmetro.

document.getElementById(`game-${gameId}`) busca um elemento HTML com o ID específico do jogo.

game.querySelector('.dashboard__item__button') e game.querySelector('.dashboard__item__img') selecionam o botão e a imagem dentro do elemento do jogo.

O bloco if/else verifica se o botão contém a classe dashboard__item__button--return.

Se a classe existir, o texto do botão muda para "Alugar", remove a classe dashboard__item__button--return do botão e remove a classe dashboard__item__img--rented da imagem.

Caso contrário, o texto do botão muda para "Devolver", adiciona a classe dashboard__item__button--return ao botão e adiciona a classe dashboard__item__img--rented à imagem. 📖

Seu código está correto e eficiente. 👍

🎓 Para saber mais: