O JavaScript vai rodar completo todas às vezes que eu clicar em um botão? Fiquei na dúvida, pois não conseguir entender como o código consegue identificar qual botão estou clicando; a minha teoria é que o while é chamado toda vez que clico em um botão, então ele roda toda a lista e executa a função do botão certo, pois foi o único que recebeu o onclick. No entanto, isso não faz sentido, pois se o while rodasse todas às vezes que clicamos no botão, o console.log deveria aparecer no console de novo. Para mim ficou parecendo meio magico, principalmente como o programa identifica qual botão estou clicando. Quero ser mais claro na minha dúvida.
const listaTeclas = document.querySelectorAll('.tecla');
function tocarSom(idDoSom) {
document.querySelector(idDoSom).play();
}
let cont = 0;
while (cont < listaTeclas.length){
const tecla = listaTeclas[cont];
const intrumento = tecla.classList[1];
const idAudio = `#som_${intrumento}`
tecla.onclick = function() {tocarSom(idAudio)};
cont +=1;
console.log(cont)
};
Seguindo a ordem do código:
1 criamos uma variável com uma lista da tecla.
2 criamos uma função que vai chamar e tocarSom, conforme o id passado por parâmetro.
3 criamos um contador para iniciar o while.
4 criamos um while.
4.1 criamos uma variável que selecionara da lista de teclas apenas uma teclas, conforme o contador.
4.2 criamos uma variável que pega no nome da segunda classe da tecla.
4.3 criamos uma variável que usa a segunda classe da tecla para compor o id do áudio específico.
4.4 determinamos onclick na tecla, o onclick vai criar uma função anonima, essa função anonima vai chamar a função tocarSom que criamos mais a cima.
4.5 o contador e somado com mais 1.
4.6 o console imprime o contador
5 o while se encerra quando o cont é maior que o número de elementos na lista.
Para mim o programa se encerra aí.
Quando que o while se inicia de novo? Ele se inicia de novo?
Se não se inicia, com oque ele identifica a tecla que cliquei? Se se inicia, porque o console.log não é impresso de novo no console?
