2
respostas

Fiz desta forma

function alterarStatus (id){
    let item=document.getElementById('game-'+id); 
    let botao= item.querySelector('.dashboard__item__button');
    let imagem= item.querySelector('.dashboard__item__img'); 
    
    if (botao.classList.contains ('dashboard__item__button--return')) {
        botao.classList.remove ('dashboard__item__button--return');
        botao.innerHTML = 'Alugar';
        imagem.classList.remove('dashboard__item__img--rented');
    } else {
        botao.classList.add ('dashboard__item__button--return');
        botao.innerText = 'Devolver';
        imagem.classList.add ('dashboard__item__img--rented');
    }
}
2 respostas

Oii, Gabriele! Que bom ver você praticando os conceitos de lógica de programação com o projeto AluGames.

Sua implementação tá muito bem estruturada. Você conseguiu identificar corretamente os elementos necessários através do id e utilizou seletores específicos para manipular o botão e a imagem dentro do item clicado.

  • Uso do parâmetro id: Ao concatenar 'game-' + id, você tornou a função flexível para funcionar com qualquer jogo da lista.
  • Manipulação de classes: O uso do classList.contains, remove e add é a melhor forma de alterar o estado visual dos elementos no CSS.
  • Lógica condicional: O if/else trata corretamente os dois estados possíveis (alugado ou disponível).

Notei que você usou innerHTML em um momento e innerText em outro:

botao.innerHTML = 'Alugar'; // Aqui
botao.innerText = 'Devolver'; // E aqui

Embora ambos funcionem para trocar o texto, é interessante manter a consistência no código. Parabéns pelo empenho e por compartilhar sua solução no fórum. Continue assim!

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

Obrigada!!