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 João Paulo De França Medeiros
| 13.9k xp | 16 posts
function alterarStatus(id) { 
    let gameClicado = document.getElementById(`game-${id}`);
    let imagem = gameClicado.querySelector('.dashboard__item__img');
    let botao = gameClicado.querySelector('.dashboard__item__button');

    if (imagem.classList.contains('dashboard__item__img--rented')) {
        imagem.classList.remove('dashboard__item__img--rented');
        botao.classList.remove('dashboard__item__button--return');
        botao.innerHTML = 'Alugar';
    }else {
        imagem.classList.add('dashboard__item__img--rented');
        botao.classList.add('dashboard__item__button--return');
        botao.innerHTML = 'Devolver';
    }

}

OH DESAFIO QUE ME DEU DOR DE CABEÇA MDS, POR CONTA DE UM PONTO FINAL KKK

1 resposta
por Renan Lima
| 4231.7k xp | 9015 posts
Alura Scuba Team Apoio Educacional - Alura

Olá, João. Tudo bem?

Muito obrigado por compartilhar o seu código aqui com a gente. Parabéns pelo trabalho. Continue com essa dedicação.

Muito bom como você utilizou classList.contains para verificar e alternar as classes da imagem e do botão. Isso torna o código mais limpo e fácil de manter.

Uma outra forma de fazer, é usar o método toggle, que adiciona a classe se ela não existir e remove se já estiver presente. Veja este exemplo:


function alterarStatus(id) {  
    let gameClicado = document.getElementById(`game-${id}`);  
    let imagem = gameClicado.querySelector('.dashboard__item__img');  
    let botao = gameClicado.querySelector('.dashboard__item__button');  

    imagem.classList.toggle('dashboard__item__img--rented');  
    botao.classList.toggle('dashboard__item__button--return');  
    botao.innerHTML = imagem.classList.contains('dashboard__item__img--rented') ? 'Devolver' : 'Alugar';  
}

O método toggle reduz a necessidade do if/else, deixando o código mais compacto. É só uma sugestão para explorar.

Conte com o apoio do Fórum. Abraços e bons estudos.