2
respostas

array pacientes retornando objetos html e não um array

Com o código passado pela aula:

var pacientes = document.querySelectorAll(".paciente");

pacientes.forEach(function(paciente) {
    paciente.addEventListener("dblclick", function() {
        this.remove();
    });
});

O meu navegador retorna:

TypeError: pacientes.forEach is not a function

Então eu tive que colocar:

Array.from(pacientes).forEach(function(paciente) {
    paciente.addEventListener("dblclick", function() {
        this.remove();
    });
});

Para funcionar.

Por que acontece isso?

2 respostas

Fala Guilherme, tudo bem ?

Então. Testei por aqui e deu tudo certo. A função é reconhecida e o callback ao duplo click é executado normalmente.

Pesquisando pela função forEach vi que ela foi adicionada não faz muito tempo na especificação do ECMA Script. Pode ser um problema de compatibilidade do seu browser que está causando o problema com o código.

Veja aqui no MDN -> https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach#Compatibilidade

Eles até sugerem outras formas de escrita como a sua para contornar o problema.

Espero ter ajudado. Abraço!

Olá Guilherme,

Sem entrar em detalhes muito técnicos, quando selecionamos elementos com a função document.querySelectorAll() ela na verdade nos retorna um NodeList, que é como se fosse um array mas de elementos do DOM.

Em geral você consegue utilizá-lo como um array normal, sem nem notar a diferença mas o que acontece é que alguns browsers mais antigos o objeto NodeList não tinha a função forEach, o que faz com que esse erro aconteça.

O Chrome e o Firefox por exemplo, já dão suporte ao forEach em NodeList desde 2016( se estão atualizados, obviamente), mas se você quer garantir a máxima compatibilidade, você pode percorrer o "array" utilizando um for comum como fizemos em momentos anteriores do curso.

Espero que tenha esclarecido sua dúvida, e por curiosidade, qual navegador você está utilizando ?