Olá mudei algumas coisas, como na hora que clicar em cancelar aparecer (Aluguel/devolução do jogo "...." foi cancelado. está aí meu código final, também descobri que podia deixar o else entre chaves vazio que também ia ser cancelado, só não ia mostrar nada.
let jogosAlugados = 0;
function contarEExibirJogosAlugados() {
console.log(Total de jogos alugados: ${jogosAlugados}
);
}
function alterarStatus(id) {
let botaoClicado = document.getElementById(game-${id}
);
let imagem = botaoClicado.querySelector('.dashboard__item__img');
let clicar = botaoClicado.querySelector('.dashboard__item__button');
let nomeJogo = botaoClicado.querySelector('.dashboard__item__name');
if (imagem.classList.contains('dashboard__item__img--rented')) {
// Confirmação para devolver o jogo
if (confirm(`Você confirma a devolução do jogo ${nomeJogo.textContent}?`)) {
alert(`${nomeJogo.textContent} devolvido!`)
imagem.classList.remove('dashboard__item__img--rented');
clicar.classList.remove('dashboard__item__button--return');
clicar.textContent = 'Alugar';
jogosAlugados--;
} else {
alert(`Devolução do jogo ${nomeJogo.textContent} cancelado!`)
// Ação caso o usuário cancele a devolução
// Neste exemplo, poderia deixar vazio(opicional)
}
} else {
// Confirmação para alugar o jogo
if (confirm(`Você confirma o aluguel do jogo ${nomeJogo.textContent}?`)) {
alert(`${nomeJogo.textContent} alugado!`)
imagem.classList.add('dashboard__item__img--rented');
clicar.classList.add('dashboard__item__button--return');
clicar.textContent = 'Devolver';
jogosAlugados++;
} else {
alert(`Aluguel do jogo ${nomeJogo.textContent} cancelado!`)
// Ação caso o usuário cancele o aluguel
// Neste exemplo, poderia deixar vazio(opicional)
}
}
contarEExibirJogosAlugados();
}
document.addEventListener('DOMContentLoaded', function() { jogosAlugados = document.querySelectorAll('.dashboard__item__img--rented').length; contarEExibirJogosAlugados(); });