Entrar Ainda não tem acesso?
1
resposta

[Projeto] fase 5 -

Referente ao curso Lógica de programação: praticando com desafios, no capítulo Projeto AluGames e atividade Faça como eu fiz: alugando e devolvendo jogos

por Rony Kalinowski Vilar
| 16.5k xp | 54 posts

segue o codigo, ja tinha colocado ele todo no ultimo. aqui com uma alteração, pois tirei o alert e deixei um console.log... 

function alterarStatus(id) {
    let gameclicado = document.getElementById(`game-${id}`);
    let imagem = gameclicado.querySelector('.dashboard__item__img');
    let botao = gameclicado.querySelector('.dashboard__item__button');
    let nomeJogo = gameclicado.querySelector('.dashboard__item__name');
        console.log(nomeJogo.innerHTML);

    if (botao.classList.contains("dashboard__item__button--return")) {
        botao.textContent = 'Alugar';
        botao.classList.remove("dashboard__item__button--return");
        imagem.classList.remove("dashboard__item__img--rented");
       
    } else {
        botao.textContent = 'Devolver';
        botao.classList.add('dashboard__item__button--return');
        imagem.classList.add('dashboard__item__img--rented');
    }
}
1 resposta
por Renan Lima
| 4180.7k xp | 8895 posts
Alura Scuba Team Apoio Educacional - Alura

Olá, Rony. Tudo bem?

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

Ótimo como você usou o console.log(nomeJogo.innerHTML); para depuração. Isso ajuda a entender o que está acontecendo no código sem interromper o fluxo com um alert().

Uma alternativa interessante para melhorar ainda mais o código é utilizar o método toggle para alternar as classes, simplificando as condições do if/else. 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');

    let estaAlugado = botao.classList.toggle("dashboard__item__button--return");
    botao.textContent = estaAlugado ? 'Devolver' : 'Alugar';
    imagem.classList.toggle('dashboard__item__img--rented', estaAlugado);
}

O toggle adiciona a classe se ela não existir e remove se já existir. Isso deixa o código mais enxuto.

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