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

[Dúvida] Não entendi como o valor do contador é relacionado com a tecla

Eu entendi a funcionalidade do loop e sua condição para que o loop se encerre. Mas o que não estou conseguindo entender é: Como o valor da referência 'contador' é relacionado a tecla pressionada. Ou seja, como o código faz para identificar qual tecla estou pressionando no momento.

3 respostas

Amanda adicionei vários LOGs mapeando cada etapa. Só troca pelo teu main.js e da uma olhadinha no console que ele meio que vai explicar cada etapa

function tocaSom(idElementoAudio){
    console.log('Fun tocaSom: Busca o som que precisa tocar: '+ idElementoAudio + 'Parte 4' )
  document.querySelector(idElementoAudio).play();

}
console.log('Pegou todas as Classes Etapa 1')
const listaDeTeclas = document.querySelectorAll(".tecla");

console.log("Entra no FOR para mapear as informações do HTML Parte 2")
for(let contador=0; contador < listaDeTeclas.length;contador++ ){

    console.log(contador+' Numero do contador')
    const tecla = listaDeTeclas[contador];
    console.log(tecla)
    const instrumento = tecla.classList[1];
    console.log(instrumento)
    //templete string
    const idAudio = `#som_${instrumento}`;/*Concatenando informações*/
    tecla.onclick = function(){
        console.log(' Recebe o click tecla.onclick : Chama função tocaSom enviando o parâmetro=' + idAudio + 'Parte 3')
        tocaSom(idAudio);
    }; 

}

Imagine que cada tag button dentro da section abaixo, corresponde a um item numa lista. A lista inicia no 0 e vai até 8

    <button class="tecla tecla_pom"> ============ 0 
    <button class="tecla tecla_clap"> ============  1
    <button class="tecla tecla_tim"> ============= 2
    <button class="tecla tecla_puff"> ============ 3
    <button class="tecla tecla_splash"> =========== 4
    <button class="tecla tecla_toim"> ============ 5
    <button class="tecla tecla_psh"> ============= 6
    <button class="tecla tecla_tic"> ============== 7
    <button class="tecla tecla_tom"> ============= 8

O 'contador' vai acessar o item correspondente dessa lista.

solução!

Achava que usando o atributo onclick, a execução do código parava para esperar o usuário apertar o botão, mas percebi que o FOR carrega todas as teclas em memória com seus respectivos índices. Ai, quando o usuário clica no botão, o índice do botão invoca o idAudio correspondente, então o idAudio é passado para a função tocaSom(idAudio) e o som acontece... uma possível resposta para essa pergunta seria essa explicação? Algum tutor poderia falar?