Olá, pessoal! Gostaria de compartilhar com vocês a minha solução.
Eu resolvi da seguinte maneira:
const html = document.querySelector('html')
const botoes = document.querySelectorAll('.app__card-button')
botoes.forEach(botao => {
botao.addEventListener('click', () => {
const atributo = botao.getAttribute('data-contexto')
if (atributo === 'short') {
html.setAttribute('data-contexto', 'descanso-curto')
} else if (atributo === 'long') {
html.setAttribute('data-contexto', 'descanso-longo')
} else {
html.setAttribute('data-contexto', 'foco')
}
})
})
Espero que isto ajude alguém. Até mais, alurer's!
At.te,
Yago.