É impressionante como cada detalhe pode fazer com que o código não funcione, acredito que ter atenção é fundamental para conseguir fazer a lógica + código alcançarem o resultado esperado, vou tentar focar mais na lógica.
Solucionado
É impressionante como cada detalhe pode fazer com que o código não funcione, acredito que ter atenção é fundamental para conseguir fazer a lógica + código alcançarem o resultado esperado, vou tentar focar mais na lógica.
Olá, Abnadab. Tudo bem?
É verdade, a atenção aos detalhes é fundamental na programação, e é ótimo ver que você está focando na lógica. É uma ótima iniciativa, pegando bem essa parte da lógica, facilita na hora de aprender o restante. Sobre os detalhes é normal esquecermos de uma vírgula que seja, o importante é conseguir visualizar o erro e corrigir.
Como você abriu esse tópico no contexto do exercício Alterando status do jogo clicado, Vou deixar algumas dicas: A lógica é essencial para alternar o status do jogo entre "Alugar" e "Devolver".
Identificação do Jogo: Primeiro, precisamos identificar qual jogo foi clicado. Isso é feito através do id do elemento HTML correspondente.
Verificação da Classe: Usamos a classe CSS para determinar o status atual do jogo. Se a classe dashboard__item__img--rented estiver presente, o jogo está alugado.
Alteração de Classe e Texto: Dependendo do status, você altera a classe e o texto do botão:
Implementação no Código: O código JavaScript usa classList.contains() para verificar a presença da classe e classList.add() ou classList.remove() para modificar as classes. O texto do botão é alterado com textContent.
Aqui está um exemplo simplificado de como isso é feito:
function alterarStatus(id) {
let gameClicado = document.getElementById(`game-${id}`);
let imagem = gameClicado.querySelector('.dashboard__item__img');
let botao = gameClicado.querySelector('.dashboard__item__button');
if (imagem.classList.contains('dashboard__item__img--rented')) {
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';
}
}
Espero que isso ajude a clarear como a lógica se aplica ao seu código. Continue praticando e evoluindo.
Espero ter ajudado e bons estudos.