Olá! Antes de ver a solução da professora, resolvi tentar eu mesmo achar a melhor resolução para este exercício. Segue:
// Lista de botões
const keyList = document.querySelectorAll('.tecla');
// Lista de sons
const soundList = document.querySelectorAll('.som');
// Condição que varre ambas as listas e relaciona uma com a outra
for(let i = 0; i < keyList.length; i++) {
keyList[i].onclick = () => {
soundList[i].play();
};
}
Encontrei essa forma bem simples utilizando uma Arrow Function na execução do onclick
, assim o código fica pouco verboso, dinâmico e funcional! Importante ressaltar que eu atribuí a classe ".som" para cada arquivo de audio, mais por uma questão de semântica mesmo.
Caso tenha sua própria resolução ou algum adendo sobre a minha, fique a vontade para postar na área de respostas desse tópico! Caso esteja com dificuldades, continue estudando, pois toda dificuldade tem algo com comum: uma solução.