javascript - Error : Cannot read property 'cloneNode' of undefined - Stack Overflow

I'm trying to add a listener to my Database using Firebase.

const dbRef=firebase.database().ref().child('messages');
dbRef.on('child_added', MS.bringData);

When something is added, I execute bringData which creates a new object called message from the snap object.

export const bringData = (snap) => {
  const message1=new Message(snap.val().objet, snap.val().message, snap.val().etat, snap.val().key);
  message1.creerLigne();
}

Then I call creerLigne() from the class Message, to create the new line and add it to tbody

creerLigne() {
     const arg=[this._objet, this._message, this._etat, this._id];
     const row=document.createElement("tr");
     row.setAttribute('id', this._id);
     const data=document.createElement("td");
     var checkB=document.createElement("input").setAttribute('type', 'checkbox', 'name', 'delete');

     var i=0;
     while(i<arg.length-1) {
         let data1=data.cloneNode();
         let text=document.createTextNode(arg[i]);
         data1.appendChild(text);
         row.appendChild(data1);
         i++;
     }

     data1.appendChild(text);
     row.appendChild(data1);
     row.appendChild(checkB.cloneNode());
     document.body.appendChild('row');
}

but unfortunately I'm getting the following error:

FIREBASE WARNING: Exception was thrown by user callback. TypeError: Cannot read property 'cloneNode' of undefined
    at Message.creerLigne 

I'm trying to add a listener to my Database using Firebase.

const dbRef=firebase.database().ref().child('messages');
dbRef.on('child_added', MS.bringData);

When something is added, I execute bringData which creates a new object called message from the snap object.

export const bringData = (snap) => {
  const message1=new Message(snap.val().objet, snap.val().message, snap.val().etat, snap.val().key);
  message1.creerLigne();
}

Then I call creerLigne() from the class Message, to create the new line and add it to tbody

creerLigne() {
     const arg=[this._objet, this._message, this._etat, this._id];
     const row=document.createElement("tr");
     row.setAttribute('id', this._id);
     const data=document.createElement("td");
     var checkB=document.createElement("input").setAttribute('type', 'checkbox', 'name', 'delete');

     var i=0;
     while(i<arg.length-1) {
         let data1=data.cloneNode();
         let text=document.createTextNode(arg[i]);
         data1.appendChild(text);
         row.appendChild(data1);
         i++;
     }

     data1.appendChild(text);
     row.appendChild(data1);
     row.appendChild(checkB.cloneNode());
     document.body.appendChild('row');
}

but unfortunately I'm getting the following error:

FIREBASE WARNING: Exception was thrown by user callback. TypeError: Cannot read property 'cloneNode' of undefined
    at Message.creerLigne 

• javascript
• firebase
• ecmascript-6
• firebase-realtime-database

Share Follow edited Feb 8, 2017 at 3:03 AL. 37.8k1010 gold badges147147 silver badges285285 bronze badges asked Feb 7, 2017 at 16:43 EL MASLOUHI HAMZAEL MASLOUHI HAMZA 6311 gold badge11 silver badge66 bronze badges 6

• 1 You use cloneNode twice. Even if the error message doesn't say the line, it should not be difficult to figure out which one. – Álvaro González Commented Feb 7, 2017 at 16:46
• Basic debugging is all you need here. What have you done so far to solve this on your own? If you're not aware, you can use console.log() as a quick, simple way to check values. The more powerful debugging tools are very important to learn how to use too. This may be a good time to start. – user1106925 Commented Feb 7, 2017 at 16:51
• ...and learning to consult API documentation is important as well. There's actually another issue on the line that is the source of this problem. – user1106925 Commented Feb 7, 2017 at 16:52
• @ÁlvaroGonzález, it's the second cloneNode because the line var checkB=document.createElement("input").setAttribute('type', 'checkbox', 'name', 'delete'); doesn't return an element, THANK YOU FOR YOUR HELP – EL MASLOUHI HAMZA Commented Feb 8, 2017 at 14:07
• @squint THANK YOU FOR YOUR ADVICES, it's all about debugging and using API documentation, I used the console.log() many times to resolve the problem, it was very helpful – EL MASLOUHI HAMZA Commented Feb 8, 2017 at 14:13

 |  Show 1 more ment

2 Answers 2

Sorted by: Reset to default 1

var checkB=document.createElement("input").setAttribute('type', 'checkbox', 'name', 'delete');

should be

var checkB=document.createElement("input");
checkB.setAttribute('type', 'checkbox');
checkB.setAttribute('name', 'delete');

.setAttribute does not return the element, and it only takes two arguments.

 creerLigne(){
                 const arg=[this._objet,this._message,this._etat,this._id];
                 const row=document.createElement("tr");
                 row.setAttribute('id',this._id);
                 const  data=document.createElement("td");
                 const checkB = document.createElement("input");
                 checkB.setAttribute('type','checkBox');
                 checkB.setAttribute('name','delete');
                 let i=0;
                    while(i<arg.length-1)
                    {
                     const data1=data.cloneNode();
                     var text=document.createTextNode(arg[i]);
                     data1.appendChild(text);
                     row.appendChild(data1);
                   i++;
                 }
               row.appendChild(checkB.cloneNode());
               const table= document.querySelector('table');
               table.appendChild(row);
             }