Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Alguem pode me explicar a logica ?

Pelo que entendi, quando escrevo "alterarContexto" ele muda a imagem através do contexto que está escrito na imagem. É isso? Se a foto estivesse com um nome diferente então ele não encontraria o contexto, é isso?

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', () => {
    alterarContexto('foco')
})

curtoBt.addEventListener('click', () =>{
    alterarContexto('descanso-curto')
})

longoBt.addEventListener('click', () => {
    alterarContexto('descanso-longo')
}) 

function alterarContexto(contexto) {
    html.setAttribute('data-contexto', contexto)
    banner.setAttribute('src', `./imagens/${contexto}.png`)
}

Print com a pasta imagens aberta. Mostrando o nome das imagens descanso-curto.png (Está em negrito), descanso-longo.png, etc...

2 respostas
solução!

Ele muda a imagem através do contexto passado que por coincidência é o mesmo nome da imagem. Se a imagem estivesse com um nome diferente, esse nome teria que ser passado via alterarContexto().

Na chamada do banner.setAttribute('src', './imagens/${contexto}.png') ele irá substituir o contexto pelo parâmetro passado, que neste caso é foco. Ou seja, ele irá procurar no diretório ./imagens/ uma foto chamada foco. Se ele encontrar, ela será exibida na página, se não, nada será exibido.

Eu não entendi direito, o que contexto significa nesse caso? É uma palavra aleatória ou faz parte da sintaxe do set.attribute? Dei uma olhada no Mozilla mas não encontrei a resposta pra minha dúvida.