1
resposta

AluGames não está funcionado

Consigo utilizar apenas uma vez o botão para alterar o status. o botão troca de Alugar para Devolver apenas uma vez, nao consigo trocar de Devolver para Alugar novamente E o botão que já começa com Devolver, eu consigo Devolver, libera o botão Alugar, consigo Alugar novamente e não consigo mais utiliza-ló. OBS: o if está diferente do que foi passado pelo Professor pois estava testando dessa forma, já havia testado do modo que o professor havia passado na videoaula e estavá com o mesmo problema.

segue o codigo abaixo

function alterarStatus(id) { event.preventDefault(); let gameClicado = document.getElementById(game-${id}); let imagem = gameClicado.querySelector('.dashboard__item__img'); let botao = gameClicado.querySelector('.dashboard__item__button');

if (botao.textContent == 'Devolver') {
     
    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 {
    imagem.classList.remove ('dashboard__item__img');
    imagem.classList.add ('dashboard__item__img--rented');
    botao.classList.add('dashboard__item__button--return')
    botao.classList.remove ('dashboard__item__button');
    botao.textContent = 'Devolver';

    
}

}

1 resposta

Oi Gabriel,

O principal problema está ao tentar voltar de "Alugar" para "Devolver", pois você remove a classe base dashboard__item__button, impedindo que o botão funcione novamente. 🙄  

Experimente ajustar seu código assim:

function alterarStatus(id) {
  event.preventDefault();
  let gameClicado = document.getElementById(`game-${id}`);
  let imagem = gameClicado.querySelector('.dashboard__item__img');
  let botao = gameClicado.querySelector('.dashboard__item__button');

  if (botao.textContent == 'Devolver') {
    imagem.classList.remove('dashboard__item__img--rented');
    botao.classList.remove('dashboard__item__button--return');
    botao.textContent = 'Alugar';
  } else {
    imagem.classList.add('dashboard__item__img--rented');
    botao.classList.add('dashboard__item__button--return');
    botao.textContent = 'Devolver';
  }
}

Para saber mais: Entenda como manipular as classes de elementos HTML com JavaScript.

Continue praticando, a persistência leva à maestria! 💪