How to resolve: Failed to execute 'appendchild' on 'Node': Parameter 1 is not of type 'Node'

Asked

Viewed 5,537 times

2

I’m having a problem with an ES6 application. I am creating a table that receives values from a form, but whenever I click on the button to send the information to the table, from the following error.

Failed to execute 'appendchild' on 'Node': Parameter 1 is not of type 'Node'.

I wonder if anyone can help me.

Code that gives the error:

 var campos = [
    document.querySelector('#data'),
    document.querySelector('#quantidade'),
    document.querySelector('#valor')
];

console.log(campos);

var tbody = document.querySelector('table tbody');

document.querySelector('.form').addEventListener('submit', function (event) {

    event.preventDefault();

    var tr = document.createElement('tr');

   campos.forEach(function (campo) {
       var td = document.createElement('td');
       td.textContent = campo.value;
       td.append('td');
       td.appendChild(td);
       // td.appendChild('td');
       // td.appendChild(td);
   });

   var tdVolume = document.createElement('td');
   tdVolume.textContent = campos[1].value * campos[2].value;

   tr.appendChild(tdVolume);

   tbody.appendChild(tr);

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

   campos[0].focus();

});
javascript ecmascript-6

  • I believe the problem is here: var tbody = document.querySelector('table tbody');. Vc checked if any element was assigned to the variable tdbody? Check with a console.log in it.

1 answer

4


I believe he’s trying to insert the td into himself. In the code below I changed to insert the td in the tr. See if it solves your problem.

campos.forEach(function (campo) {
   var td = document.createElement('td');
   td.textContent = campo.value;
   td.append('td');
   tr.appendChild(td);
});

Browser other questions tagged javascript ecmascript-6

You are not signed in. Login or sign up in order to post.