Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

JavaScript para Web: Crie páginas dinâmicas - Resultado Final

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');
    }

}
1 resposta
solução!

Oi Danilo, tudo bem?

Parabéns por concluir o curso e criar sua própria maneira de codar :D. Muito obrigada por postar aqui seu código e explicar o que fez, assim pode ajudar outras pessoas a entender melhor e fazer diferente também.

Continue os bons estudos.

Um abraço.