Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

[Dúvida] Erro no uso de confirm (Desafio do Alugames)

No "Desafio: hora da prática", tem esse exercício: "No projeto Alugames, uma confirmação ao devolver um jogo, solicitando ao usuário que confirme a devolução antes que ela seja concluída. Isso pode ajudar a evitar devoluções acidentais." Quando o usuário clica para devolver o jogo, aparece o confirm mas, independente do que o usuário seleciona (Ok ou Cancelar), o jogo é dado como devolvido. Como eu faço para o Cancelar funcionar? Meu código está assim:

let jogosAlugados = ['Takenoko'];

function alterarStatus(id) {
    let game = document.getElementById('game-' + id);
    let image =game.querySelector('.dashboard__item__img');
    let botao = game.querySelector('.dashboard__item__button');
    let nome = game.querySelector('.dashboard__item__name').innerText;

    if (botao.classList.contains('dashboard__item__button--return')) {
        
        if (confirm(`Deseja mesmo devolver o jogo ${nome}?`)); {
        image.classList.remove('dashboard__item__img--rented');
        botao.classList.remove('dashboard__item__button--return');
        jogosAlugados = jogosAlugados.filter(gameName => gameName !== nome);
        botao.innerHTML = "Alugar";
        }
    } else {
        image.classList.add('dashboard__item__img--rented');
        botao.classList.add('dashboard__item__button--return');
        jogosAlugados.push(nome);
        botao.innerHTML = "Devolver";
    }
    contarJogos();
}

function contarJogos() {
    console.log(`Qtd. de jogos alugados: ${jogosAlugados.length}`);
    console.log(`Jogos alugados: ${jogosAlugados.join(',')}`);
}
1 resposta
solução!

Olá, Allan. Tudo bem?

O problema está no uso de um ponto e vírgula após a instrução if, que está interrompendo a lógica de controle. Quando você escreve if (confirm(...));, o ponto e vírgula termina a instrução if, e o bloco de código seguinte é sempre executado, independentemente do resultado do confirm.

Para corrigir isso, basta remover o ponto e vírgula após a condição if. Veja como o seu código deve ficar:

let jogosAlugados = ['Takenoko'];

function alterarStatus(id) {
    let game = document.getElementById('game-' + id);
    let image =game.querySelector('.dashboard__item__img');
    let botao = game.querySelector('.dashboard__item__button');
    let nome = game.querySelector('.dashboard__item__name').innerText;

    if (botao.classList.contains('dashboard__item__button--return')) {
        
        if (confirm(`Deseja mesmo devolver o jogo ${nome}?`)) {
            image.classList.remove('dashboard__item__img--rented');
            botao.classList.remove('dashboard__item__button--return');
            jogosAlugados = jogosAlugados.filter(gameName => gameName !== nome);
            botao.innerHTML = "Alugar";
        }
    } else {
        image.classList.add('dashboard__item__img--rented');
        botao.classList.add('dashboard__item__button--return');
        jogosAlugados.push(nome);
        botao.innerHTML = "Devolver";
    }
    contarJogos();
}

function contarJogos() {
    console.log(`Qtd. de jogos alugados: ${jogosAlugados.length}`);
    console.log(`Jogos alugados: ${jogosAlugados.join(',')}`);
}

Com essa alteração, o código dentro do bloco if só será executado se o usuário clicar em "Ok" no confirm. Se o usuário clicar em "Cancelar", o bloco de código não será executado, e o jogo não será devolvido. Tenta isso, qualquer coisa manda aqui de novo.

Espero ter ajudado e bons estudos!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓.Bons Estudos!