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

Considera o botão como seletor inválido

Olá!

Por aqui deu tudo certo enquanto estava utilizando o document.querySelector para selecionar a tecla pela classe ".tecla_pom".

Criei a lista listaDeTeclas e deu tudo certo também.

Porém, ao tentar utilizar o querySelector em um dos elementos da lista, o navegador está retornando o seguinte erro: "Uncaught DOMException: Document.querySelector: '[object NodeList]' is not a valid selector", indicando o trecho de código: document.querySelector(listaDeTeclas).onclick = tocaSomPom;.

Revisei o código várias vezes e não achei erros em comparação ao da professora.

Alguém passou por algo parecido e/ou poderia me ajudar a entender onde está o erro? :)

Obrigada!

4 respostas

Olá Ana, boa noite!!

*Identificando o Problema: *

De acordo com a sua pergunta, você quer saber porque esta dando erro na seleção do querySelector().

*Solução do Problema: *

Para começar, a função querySelector(selector) recebe um valor do tipo "string" como argumento, e no seu código você passa uma lista de elementos como argumento para o querySelector(selector). Para resolver isso, você deve percorrer cada elemento dessa lista adicionando o ouvinte de evento, dessa forma:

// Essa é uma forma mais 'arcaica' de se fazer.
for(let interador = 0; interador < listaDeTeclas.lenght; i++) {
    listaDeTeclas[interador].onclick = tocaSomPom;
}

// Ou você pode fazer dessa forma mais recente do Js.

listaDeTeclas.forEach( (element) => {
    element.onclick = tocaSomPom;
})

// Ambas as formas funcionam, só coloquei pois não sei o seu nível de conhecimento.

*Conclusão: *

O seu erro foi passar um valor que não é aceitado pelo querySelector, o valor dele tem que ser uma string que segue a forma de seleção do css. Pois você passou um array de elementos para ele, e ele não trabalha com esse tipo de valor.

*Despedida: *

Se a sua dúvida foi resolvida, não se esqueça de colocar a questão como resolvida, pois assim as pessoas que tiverem o mesmo problema que você, saberão que a sua pergunta foi resolvida e clicaram nela para saber como resolver.

Tenha um bom estudo!!

Olá Ana, tudo bem?

Esse erro está acontecendo pois o seletor que passou para o querySelector não é válido. Poderia compartilhar seu código para entender melhor o que está acontecendo?

Aguardo Ana, bons estudos?

Obrigada pessoal!

No momento eu já alterei todo o código, mas simulei aqui para mostrar o erro:

const listaDeTeclas = document.querySelectorAll('.tecla');
console.log(listaDeTeclas);
console.log(listaDeTeclas[4]);
document.querySelector(listaDeTeclas[3]);

Coloquei esses 2 console.log para fazer exibir a lista e um item específico dela, e apareceu tudo certo no console do navegador. Porém, ao tentar selecionar, continua exibindo o erro que falei anteriormente, como podem ver no print abaixo:

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

solução!

Ana, como já temos todos dos elementos da lista de teclas dentro do const listaDeTeclas, você pode criar uma variável e atribuir qualquer dos itens do array listaDeTeclas da mesma forma que está passando para o console.log.

const teclaIndex3 = listaDeTeclas[3]

O querySelector só pode receber string e se der um log no teclaIndex3 para retornar o tipo dessa variável, terá como retorno um obejct.

const listaDeTeclas = document.querySelectorAll('.tecla');
console.log(listaDeTeclas);
const teclaIndex4 = listaDeTeclas[4]
console.log(typeof(teclaIndex4));
console.log(teclaIndex4);

Espero ter ajudado, bons estudos Ana.