1
resposta

Me ajudem com o código final, pois não está "ativando" a mudança no CSS, como se o não existisse um evento.

Segue o código, caso encontre alguma problema me avisem, por favor.

function tocaSom (idElementoAudio) {
    document.querySelector(idElementoAudio).play();
}

const listaDeTeclas = document.querySelectorAll('.tecla')

for (let i = 0; i < listaDeTeclas.length; i++) {

    const teclas = listaDeTeclas[i]
    const instrumento =  teclas.classList[1]
    const som = ("#som_"+instrumento)

    teclas.onclick = function () {
        tocaSom(som)
    }

    teclas.onkeydown = function (evento) {
        if(evento.code==='Enter' || evento.code==='Space'){
            teclas.classList.add('ativa');
        }
    }

    teclas.onkeyup  = function () {
        teclas.classList.remove('ativa');
    }
}
1 resposta

Bom dia!

Sua resolução ficou excelente! Você fez um ótimo uso do aprendizado.

Parabéns pelo empenho nos estudos e continue praticando.

Para que mais pessoas consigam visualizar a sua solução proposta, é recomendado que você marque este tópico como solucionado. Assim pode ajudar ainda mais pessoas :)

Bons estudos!

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software