1
resposta

Outra maneira

As vezes tento fazer o código antes de ver no vídeo, para testar meus conhecimentos que estou aprendendo, dessa vez, fiz o código de tocar os sons diferentes em cada botão. Fiz uma nova lista com o querySelectorAll() para os audios, criei uma classe chamada "som-tecla" para os audios para fazer a lista.

Depois, dentro do for, modifiquei o indice da lista de audios através do mesmo contador dos botões, desse jeito:

const listaTeclas = document.querySelectorAll(".tecla");

const listaSons = document.querySelectorAll(".som-tecla")

function tocaSom(valor){
    valor.play();
}

for(let i = 0; i < listaTeclas.length; i++){
    listaTeclas[i].onclick = function(){
        tocaSom(listaSons[i]);
    }
}

Está funcionando normalmente, mas queria saber se do jeito que eu fiz pode ocorrer algum erro futuro, ou se também é uma maneira correta

1 resposta

Olá, Elias, tudo bem?

A sua forma também está correta! Parabéns por ter encontrado sua própria solução, é uma forma excelente de exercitar seu raciocínio lógico.

Consegui pensar em apenas um contra na sua abordagem. Dentro do laço for, você está utilizando o mesmo índice i para acessar os itens das listas listaTeclas e listaSons. Isso "obriga" os itens de uma lista a estarem na mesma ordem que os itens da outra lista.

Na prática, a ordem dos elementos button no HTML também devem estar na mesma ordem que os elementos audio. Se algum dia você resolver trocar de lugar os botões Pom e Clap no HTML, por exemplo, você terá que lembrar de fazer essa mesma troca nos elementos audio correspondentes. Se você não lembrar, os sons serão trocados e você talvez perderia algum tempo buscando a causa do erro.

Por outro lado, a abordagem da Vanessa deixa o HTML mais flexível: mesmo que ela troque os lugares dos botões no HTML, os elementos audio podem estar em qualquer ordem.

Novamente: sua abordagem está correta! Mas pensar nos prós e contras de cada tipo de abordagem estimula nosso raciocínio e senso crítico. No dia a dia como pessoas desenvolvedoras, estamos sempre fazendo isso.

Espero ter ajudado! Abraços e bons estudos :)