Segui a lógica do desafio e consegui fazer funcionar, fiz com que, ao clicar no botão, a imagem mude e o texto altere entre “Alugar” e “Devolver”, adicionei também um confirm() para que o usuário possa cancelar a devolução, mas não sei se essa é a melhor forma de organizar o código.
let gameClicado;
let imagem;
let botao;
function alterarStatus(id) {
gameClicado = document.getElementById(`game-${id}`);
imagem = gameClicado.querySelector('.dashboard__item__img');
botao = gameClicado.querySelector('.dashboard__item__button, .dashboard__item__button--return');
if (imagem.classList.contains('dashboard__item__img--rented')) {
Devolver(id);
} else {
imagem.classList.add('dashboard__item__img--rented');
botao.classList.remove('dashboard__item__button');
botao.classList.add('dashboard__item__button--return');
botao.textContent = 'Devolver';
}
}
function Devolver(id) {
let ok = confirm('Você deseja devolver o jogo?');
if (ok) {
alert('O jogo foi devolvido!');
imagem.classList.remove('dashboard__item__img--rented');
imagem.classList.add('dashboard__item__img');
botao.classList.remove('dashboard__item__button--return');
botao.classList.add('dashboard__item__button');
botao.textContent = 'Alugar';
}else {
alert('Devolução do jogo cancelado!');
}
}
