1
resposta

[Dúvida] Minhas imagens não estão realizando a troca.

Olá! Realizei o download do projeto original e, inicialmente, nenhuma das imagens estavam aparecendo. Procurei nos fóruns e vi que uma das soluções era retirar a barra (ex: "/imagens/logo.png" para "imagens/logo.png"). Funcionou, as imagens começaram a aparecer. Mas, quando clico em "descanso curto" ou "descanso longo", não ocorre a troca das imagens. Alguém poderia me auxiliar?

Meu código está assim:

const html = document.querySelector('html')
const focoBt = document.querySelector('.app__card-button--foco')
const curtoBt = document.querySelector('.app__card-button--curto')
const longoBt = document.querySelector('app__card-button--longo')
const banner = document.querySelector('app__image')

focoBt.addEventListener('click', () => {
    html.setAttribute('data-contexto', 'foco')
    banner.setAttribute('src', 'imagens/foco.png')
})

curtoBt.addEventListener('click', () => {
    html.setAttribute('data-contexto', 'descanso-curto')
    banner.setAttribute('src', 'imagens/descanso-curto.png')
})

longoBt.addEventListener('click', () => {
    html.setAttribute('data-contexto', 'descanso-longo')
    banner.setAttribute('src', 'imagens/descanso-longo.png')
})
1 resposta

O, Christiellen, tudo bem?

No seu código, você esqueceu de colocar o ponto antes do nome da classe app__card-button--longo e app__image ao selecionar o botão de "descanso longo" e a imagem. Isso é necessário para indicar que você está selecionando um elemento pela classe. Portanto, ao invés de:

const longoBt = document.querySelector('app__card-button--longo')
const banner = document.querySelector('app__image')

Você deve usar:

const longoBt = document.querySelector('.app__card-button--longo')
const banner = document.querySelector('.app__image')

Essa pequena alteração deve fazer com que o evento de clique funcione corretamente.

Espero ter ajudado. Caso tenha dúvidas, conte com o fórum. Abraços!

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