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

Fiz sem usar "while" para passar as funções. Avaliem por favor.

Decidi tentar fazer sem o "while" e, depois de bater um poco de cabeça e dar umas passadas no stack overflow cheguei nesse código aí:

const keys = document.querySelectorAll('.tecla');
const sounds = document.querySelectorAll('audio');

document.onclick = function (event) {
    const index = matchClassToId(event.srcElement.classList[1]);
    try {
        sounds[index].play();
    } catch (e) {
        console.log('click nos botões, cara pálida.')
    }
}

function matchClassToId (buttonClass) {
    for (let i = 0; i < sounds.length; i++) {
        const soundId = sounds[i].getAttribute('id');
        if ( buttonClass === soundId ) {
            return i;
        }
    }
}

Pergunta pros mais experientes: Suponhamos que tivessemos um número MUITO grande de botôes. Na minha cabeça, quando a página fosse carregar e o script fosse executado, iria rodar o while do código da instrutora até que todos os elementos recebessem a função com o parâmetro correto da lista de sons e, no caso de haver um número absurdo de teclas e sons, isso faria a pagina demorar a carregar mas, depois de ter carregado, tudo executaria sem delay, pois as funções já foram passadas. Nessa minha versão, novamente na hipótese de ter muitos botões, todas as vezes que houvesse um click num botão o for loop teria que verificar qual id é igual a classe obtida no "event.srcElement.classList[1]", ficando mais ineficiente quanto maior for a lista e quanto mais próximo do fim dela o botão clicado está. É isso mesmo ou eu estou boiando? rsrsrs E no caso de ser, seria melhor carregar a página mais rápido como no meu código e ir executando botão por botão ou no modo da instrutora, carregando tudo logo de cara? Eu não consegui chegar numa conclusão porquê, no meu código, no caso de ter muitos botões, poderia começar a demorar a responder, mas pra isso precisaria de um número absurdo mesmo de botões e, no código da instrutora depois de carregados, tudo estaria pronto para executar, teoricamente sem delay, mas será que com tantos botões disponíveis a chance de todos eles serem tocados não diminui tanto a ponto de não fazer sentido carregar tudo?

1 resposta
solução!

Oi Daniel, tudo bem?

Desculpa a demora em retornar.

Parabéns pelo seu código! É sempre bom tentar resolver problemas de diferentes formas e aprender novas maneiras de fazer as coisas.

Respondendo à sua pergunta, é verdade que, no caso de ter muitos botões, o loop for no seu código seria executado várias vezes a cada clique, o que pode deixar a execução mais lenta. No entanto, como você mesmo mencionou, seria necessário um número muito grande de botões para que isso se tornasse um problema real.

Por outro lado, no código da instrutora, todos os eventos são adicionados de uma só vez, o que pode deixar a página mais lenta no carregamento inicial. Mas, uma vez que tudo estiver carregado, a execução deve ser mais rápida e eficiente.

Em resumo, a escolha entre as duas abordagens depende do contexto específico do seu projeto. Se você espera ter um número muito grande de botões, pode ser melhor optar pelo código da instrutora para garantir uma execução mais rápida e eficiente. Caso contrário, o seu código pode ser uma opção viável e mais simples de implementar.

Um abraço e bons estudos.