segue meu código refatorado
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');
// Array de botões para iteração
const botoes = [focoBt, curtoBt, longoBt];
// Mapeamento dinâmico: lê do HTML e mapeia para o contexto correto
const contextoMap = {
[focoBt.dataset.contexto]: 'foco',
[curtoBt.dataset.contexto]: 'descanso-curto',
[longoBt.dataset.contexto]: 'descanso-longo'
};
// Event listener único aplicado a todos os botões
botoes.forEach(botao => {
botao.addEventListener('click', (event) => {
const dataContexto = event.currentTarget.dataset.contexto;
const contexto = contextoMap[dataContexto];
if (contexto) {
alteraContexto(contexto);
}
});
});
function alteraContexto(contexto) {
html.setAttribute('data-contexto', contexto);
banner.setAttribute('src', `./imagens/${contexto}.png`);
}
Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!