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

Failed to execute 'appendChild' on 'Node': paramater 1 is not of type 'Node'

Aparece essa exceção do título quando eu uso appendChild para incluir o tdVolume na tr, e para de dar erro quando ao invés de usar appenChild eu escrevo somente append Abaixo está o código completo do index.js da forma que acontece o erro.

let $ = document.querySelector.bind(document);


let campos = [
    $("#data"),
    $("#quantidade"),
    $("#valor")
];

let tbody = $("table tbody")


    $(".form").addEventListener('submit', function(event){

       event.preventDefault();

      let cr = document.createElement.bind(document);
      let tr = cr("tr");
      campos.forEach(function(campo){
        let td = cr("td");
        td.textContent = campo.value
        tr.appendChild(td);

    });
       let tdVolume =  cr("td");
       tdVolume = campos[1].value * campos[2].value;
       tr.appendChild(tdVolume);
       console.log(tr);

       tbody.append(tr);

       campos[0].value = "";
       campos[1].value = 0;
       campos[2].value = 0

       campos[0].focus();

  });
2 respostas

Oi Valmyr tudo bem,

Faltou passar o textContent para o tdVolume

tdVolume.textContent = campos[1].value * campos[2].value;

Ai você testa com o appendChild novamente

solução!

Fala Valmyr, tudo bom?

Selecionei o código que está dando erro para darmos uma olhada nele juntos.

let tdVolume =  cr("td");
       tdVolume = campos[1].value * campos[2].value;
       tr.appendChild(tdVolume);
       console.log(tr);

Vamos lá, primeiro você cria sua tdVolume utilizando um ótimo bind (adorei!), logo depois, você atribui um cálculo a mesma variável e depois tenta fazer o appendChild

No momento que você faz essa reatribuição, sua variável deixa de armazenar um elemento (Node) td, e passa a armazenar o valor de um cálculo!

Se dermos uma olhada na documentação, vamos ver as diferenças entre appendChild e append, veja abaixo:

  • ParentNode.append() permite que você também "appenda" objetos DOMString, enquanto Node.appendChild() só aceita objetos Node.
  • ParentNode.append() não tem valor de retorno, enquanto Node.appendChild() retorna o Node que foi "appendido".
  • ParentNode.append() consegue "appendar" varios Nodes e strings , enquanto Node.appendChild() só consegue "appendar" um

Dito isso, o appendChild() deixa de funcionar já que sua variável deixa de ser um Node! Enquanto o append consegue lidar com o que sua variável armazena naquele momento.

Mas quais são as possíveis soluções?

Depende do seu objetivo, mas me parece que basta substituir a linha

tdVolume = campos[1].value * campos[2].value;

pela linha:

tdVolume.textContent = campos[1].value * campos[2].value;

Espero ter ajudado! E qualquer dúvida volte a postar!

Abraços e bons estudos!

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software