1
resposta

[Projeto] 2) Criando um array de botões

// Som Pom
let contadorBotao = 0; // #DESAFIO 01

function tocaSom(idElementoAudio){
    contadorBotao = contadorBotao + 1; // #DESAFIO 01
    console.log(`Contador botão: ${contadorBotao}`); // #DESAFIO 01
    document.querySelector(idElementoAudio).play();
}

const listaTeclas = document.querySelectorAll('.tecla'); // Lista com todas as teclas

// exemplo de função anonima  .onclick por exemplo. NAO É NECESSARIO DAR NOME)
for (let contador = 0; contador < listaTeclas.length; contador++) {

    const tecla = listaTeclas[contador]; // armazena todos os elementos com a iteração do contador

    const instrumento = tecla.classList[1]; // seleciona a class contido no elemento
    
    const idAudio = `#som_${instrumento}`; // template string

    // função anonima (por padrão o js chama automat. a função, por isso é criado essa função anonima para ser executada somente quando tiver o evento
    tecla.onclick = function () {
        tocaSom(idAudio);
    }
}

console.log(listaTeclas); // #DESAFIO 02
1 resposta

Oi, Diego! Como vai?

Gostei bastante da ideia de imprimir o listaTeclas no console, isso ajuda a visualizar a estrutura do array de botões e entender melhor como manipular cada elemento.

Parabéns por praticar.

Alura Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!