Segue a minha versão do código JS desenvolvido em aula: OBS: Optei por criar as funções direto na chamada do item da lista pra deixar o código menor, e optei por segmentar a estrutura if else na função tocar para deixar as mensagens de erro mais especificas.
const teclas = document.querySelectorAll('.tecla');
function tocar(id) {
const element = document.querySelector(id);
if (element) {
if (element.localName === 'audio') {
element.play();
}
else {
console, log('Seletor invalido');
}
}
else {
console, log('Elemento não encontrado');
}
}
for (let i = 0; i < teclas.length; i++) {
teclas[i].onclick = function () {
const idSom = `#som_${teclas[i].classList[1]}`;
tocar(idSom);
}
teclas[i].onkeydown = function (key) {
if ((key.code == 'Enter') || (key.code == 'Space')) {
teclas[i].classList.add('ativa');
}
}
teclas[i].onkeyup = function () {
teclas[i].classList.remove('ativa');
}
}