Entrar Ainda não tem acesso?
1
resposta

[Dúvida] A imagem não opaca só o botão

Referente ao curso Lógica de programação: praticando com desafios, no capítulo Projeto AluGames e atividade Alterando status do jogo clicado

por Ivan Da Silva Campos
| 7.9k xp | 15 posts

Estou escrevendo e aconpanhando a resposta mas ao comparar apenas o botão opaca e ele não volta ao normal nomsegundo clique, Meu código

if (imagem.classList.contains(`dashboard__item__img--rented`)){
        imagem.classList.remove(`dashboard__item__img--rented`);
        //botao.classList.add()
        //botao.classList.replace(`dashboard__item__button`,`dashboard__item__button dashboard__item__button--return`)
    } else {
        botao.classList.add(`dashboard__item__img--rented`);
    }

Codigo da aula que funciona

if (imagem.classList.contains('dashboard__item__img--rented')) {
    imagem.classList.remove('dashboard__item__img--rented');
} else {
    imagem.classList.add('dashboard__item__img--rented');
}

Não sei se é o caso mas a única diferença é que eu usei crase em vez de aspa simples. O que pode ser?

1 resposta
por Renan Lima
| 3963.3k xp | 8426 posts
Alura Scuba Team Apoio Educacional - Alura

Olá, Ivan. Tudo bem?

O problema pode estar relacionado ao uso das crases em vez de aspas simples. No JavaScript, as crases são geralmente usadas para criar strings de template, que permitem interpolação de variáveis, enquanto as aspas simples ou duplas são usadas para strings normais.

No seu código, você está usando crases para as classes CSS, o que pode estar causando um comportamento inesperado. Experimente substituir as crases por aspas simples no seu código, assim como no exemplo da aula:

if (imagem.classList.contains('dashboard__item__img--rented')) {
    imagem.classList.remove('dashboard__item__img--rented');
    //botao.classList.add()
    //botao.classList.replace('dashboard__item__button','dashboard__item__button dashboard__item__button--return')
} else {
    imagem.classList.add('dashboard__item__img--rented');
}

Além disso, garanta que está manipulando a mesma classe tanto para adicionar quanto para remover, e que a lógica para o botão está implementada corretamente, como no exemplo da aula.

Espero ter ajudado e bons estudos.

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