Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

[Dúvida] Dúvida sobre o Alura MIDI

Olá, pessoal! Tudo bem?

Estou estudando JavaScript novamente depois de muito tempo e acabou surgindo uma dúvida ao longo do passo a passo do Alura MIDI. No exercício, foi desenvolvido o seguinte código:

function tocaSom (idElementoAudio) {
    document.querySelector(idElementoAudio).play();
}

const listaDeTeclas = document.querySelectorAll('.tecla'); //guarda em lista todos os os elemento com a classe tecla

for (let contador = 0; contador < listaDeTeclas.length; contador++) {

    const tecla = listaDeTeclas[contador];
    const instrumento = tecla.classList[1];
    const idAudio = `#som_${instrumento}`; //template string

    tecla.onclick = function () {
        tocaSom(idAudio);
    }

}

Se a estruturação do código foi feita através de um for, as variáveis não seriam sobrescritas após cada incremento? A função onclick de cada input está sendo armazenada em algum local? Se sim, de que forma?

Desde já, obrigado!

2 respostas
solução!

Olá, Gabriel! Tudo bem?

Ótima pergunta! No código apresentado, as variáveis não são sobrescritas após cada incremento do loop. Isso acontece porque as variáveis tecla, instrumento e idAudio são declaradas dentro do bloco do loop for, utilizando a palavra-chave const. Isso significa que elas são redeclaradas a cada iteração do loop, mas não são sobrescritas.

Quanto à sua segunda pergunta, a função onclick de cada elemento tecla está sendo armazenada dentro do próprio elemento, através da propriedade onclick. Dessa forma, quando o elemento é clicado, a função armazenada é executada.

Espero ter ajudado a esclarecer suas dúvidas! Se precisar de mais ajuda, é só perguntar.

Bons estudos!

Muito obrigado pela ajuda, Renan! Deu pra esclarecer bem o assunto!