Oi Ana,
Seu código apresenta alguns problemas.
Primeiro, todosBt é um NodeList, e você não pode usar addEventListener diretamente nele.
Você precisa iterar sobre cada elemento do NodeList e adicionar o addEventListener individualmente.
Segundo, a função alterarContexto está incompleta e com um erro de sintaxe.
Ela recebe apenas um argumento (contexto), mas tenta usar contexto como se fosse um iterador dentro do forEach.
Além disso, a variável musica na sua função de evento change não está definida; você provavelmente quis usar musicaFoco.
Aqui está uma versão corrigida do seu código:
const todosBt = document.querySelectorAll('.appCardButton');
const musicaFocoInput = document.querySelector('#alternar-musica');
const musicaFoco = new Audio('./sons/luna-rise-part-one.mp3');
musicaFoco.loop = true;
todosBt.forEach(botao => {
botao.addEventListener('click', () => {
alterarContexto('button');
botao.classList.add('active');
});
});
function alterarContexto(tipo) {
todosBt.forEach(botao => {
if (botao.type === tipo) {
botao.classList.remove('active');
}
});
}
musicaFocoInput.addEventListener('change', () => {
if (musicaFoco.paused) {
musicaFoco.play();
} else {
musicaFoco.pause();
}
});
Note as mudanças: a iteração com forEach para adicionar o addEventListener a cada botão, a correção da função alterarContexto para remover a classe active apenas dos botões do tipo especificado e a correção da variável musica para musicaFoco. 💻
Lembre-se de verificar se o seletor #alternar-musica e a classe appCardButton estão corretas no seu HTML. 😎
Para saber mais: Trabalhando com eventos em JavaScript. Este link da MDN explica como usar o addEventListener e outros métodos relacionados a eventos em JavaScript. 🎓
Persistência e prática são seus melhores aliados! 👍
