Boa tarde!
Sempre assisto os vídeos, praticando o conteúdo e quando sinto que já consigo resolver sozinho o problema, dou uma pausa nos vídeos e vou codificar. Noto que consigo grandes avanços em meu aprendizado, utilizando desta metodologia.
Vamos para a Solução:
Analisei a estrutura HTML do documento e notei que apesar dos botões utilizarem classe e os elementos audio utilizarem id, ambos compartilham de uma mesma informação, que no caso é o nome do som, exemplo:
<button class="tecla tecla_pom">Pom</button>
<audio src="sounds/keyq.wav" id="som_tecla_pom"></audio>
Esses dois elementos tem em comum a palavra "pom".
E esse padrão se estende aos outros elementos.
Então, capturei todos os elementos buttons de forma genérica, criando um list de buttons.
Após, percorri os elementos deste List, e adicionei em seu onclick a função "playSound", cujo objetivo é executar o play do elemento audio, levando em consideração a semelhança de nomes entre class e id.
Segue o código:
//Função para extrair apenas o nome do som que deverá ser tocado
function getOnlySoundName(classList){
return soundName = classList[1].replace("tecla_", "");
}
//Função para tocar o som
function playSound(event){
var sound = getOnlySoundName(event.currentTarget.classList);
document.querySelector(`#som_tecla_${sound}`).play();
}
//Faz a atribuição da função de tocar o som para todos os botões do documento
function defineOnclickOfButtons(buttons){
for (let index = 0; index < buttons.length; index++) {
buttons[index].onclick = playSound;
}
}
//Capturando todos os botões do documento
var documentButtons = document.querySelectorAll("button");
defineOnclickOfButtons(documentButtons)
