1
resposta

[Dúvida] Erro quando não defino uma constante auxiliar

Olá,

Gostaria de entender o motivo de um erro que está acontecendo aqui.

Quando escrevo o código abaixo, ele funciona.

    for(i = 0; i < 9; i++){

        const tecla = listaDeTeclas[i];
        const idAudio = '#som_'+listaDeTeclas[i].classList[1]

        listaDeTeclas[i].onkeydown = function(){
            tecla.classList.add('ativa');
        }
    }

Mas se tento fazer de uma forma mais direta, sem a definição da const tecla, como abaixo, dá erro:

    for(i = 0; i < 9; i++){

        const tecla = listaDeTeclas[i];
        const idAudio = '#som_'+listaDeTeclas[i].classList[1]

        listaDeTeclas[i].onkeydown = function(){
            listaDeTeclas[i].classList.add('ativa');
        }
    }

O erro no console é "Uncaught TypeError: Cannot read properties of undefined (reading 'classList') at listaDeTeclas..onkeydown"

A dúvida surgiu na aula https://cursos.alura.com.br/course/javascript-web-paginas-dinamicas/task/97760.

Obrigado!

1 resposta

Opa Ricardo, tudo bem?

Peço desculpa pela demora para respondê-lo.

Fiz alguns testes com o seu código e percebi que o problema está localizado na concatenação que você realiza quando cria sua const idAudio. Nela você realiza uma concatenação de valores que não vai conseguir coletar os valores de forma correta, podendo ocasionar um erro, como visto na sua situação.

Como solução, basta utilizar a mesma estrutura utilizada pela instrutora durante o curso, sendo #som_${listaDeTeclas[i].classList[1]};, ao utilizar o "$" vai ser possível coletar as informações necessárias para serem passadas a sua variável idAudio. A resolução do seu código ficaria assim:

    for(i = 0; i < 9; i++){

        const tecla = listaDeTeclas[i];
        const idAudio = `#som_${listaDeTeclas[i].classList[1]}`;

        listaDeTeclas[i].onkeydown = function(){
            tecla.classList.add('ativa');
        }
    }

Acho importante apontar que toda essa estrutura deve estar entre crases, pois apenas assim o "$" poderá ser utilizado de forma correta e a informação presente na listaDeTeclas poderá ser coletada e implementada juntamente com o texto "#som_".

Espero que eu tenha lhe ajudado, caso ainda tenha dúvidas com relação a este tópico, estarei a sua disposição. Abraços e bons estudos!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓.