Ao abrir o projeto no navegador, a aplicação funciona perfeitamente, porém ao inspecionar, apresenta o seguinte erro: main.js:31 Uncaught TypeError: Cannot read properties of undefined (reading 'classList').
Segue meu códiogo:
function tocaSom (idElementoAudio) {
document.querySelector(idElementoAudio).play();
}
// Declaramos uma função no JS quando precisamos guardar um código que será executado num segundo momento
const listaDeTeclas = document.querySelectorAll('.tecla')
//listaDeTeclas[i].onclick = tocaSomPom;
// Utiliza-se "=" para atribuir ao clique a execução da função
// A função não possu "()" para que não seja executada imediatamente ao iniciar o navegador
/*
let i = 0;
while (i < listaDeTeclas.length) {
const instrumento = listaDeTeclas[i];
const somInstrumento = instrumento.classList[1];
const idInstrumento = `#som_${somInstrumento}`;
instrumento.onclick = function () {
tocaSom(idInstrumento);
}
i = i + 1;
}
*/
for (let i = 0; 1 < listaDeTeclas.length; i++) {
const instrumento = listaDeTeclas[i];
const somInstrumento = instrumento.classList[1];
const idInstrumento = `#som_${somInstrumento}`; // Template String
instrumento.onclick = function () {
tocaSom(idInstrumento);
}
}
Se alguem conseguir me ajudar, eu agradeço!