I am trying to display my results and I am getting an error: "insertRow is not a function. Not sure how I can fix this.

JS file:

function sayHelloCallback (response) {
   var table = document.getElementById("wheel");

   for(i = 0; i < response.message.length; i++)
   {
       var row = table.insertRow(0);
       var cell = row.insertCell(0);
       cell.innerHTML = response["message"][i];
   }
}

HTML File:

<div class="w3-container w3-padding-64 w3-center" id="salaries">
   <h2>View Salaries</h2>
   <p id="wheel">
       <i class="fa fa-spinner w3-spin" style="font-size:64px"></i>
   </p>
</div>

Please help.

I am trying to display my results and I am getting an error: "insertRow is not a function. Not sure how I can fix this.

JS file:

function sayHelloCallback (response) {
   var table = document.getElementById("wheel");

   for(i = 0; i < response.message.length; i++)
   {
       var row = table.insertRow(0);
       var cell = row.insertCell(0);
       cell.innerHTML = response["message"][i];
   }
}

HTML File:

<div class="w3-container w3-padding-64 w3-center" id="salaries">
   <h2>View Salaries</h2>
   <p id="wheel">
       <i class="fa fa-spinner w3-spin" style="font-size:64px"></i>
   </p>
</div>

Please help.

• javascript
• html

• insertRow is a function on a table element, not a p element. – tymeJV Commented Nov 21, 2017 at 14:51
• you have not define your table as Table – YanetP1988 Commented Nov 21, 2017 at 14:51

3 Answers 3

insertRow is a property of tables.

You are trying to call it on a paragraph.

If you want to add data to an arbitrary element, use appendChild.

The HTMLTableElement.insertRow() method inserts a new row in the table and returns a reference to the new row.

Then insertRow() function should be called on HTMLTableElement, but the elment with the id wheel in your sample is a paragraph p and not a table.

insertRow is a HTMLTableElement method. you need to call it on a table element.

Ex:

function sayHelloCallback(response) {
    //window.alert(response.message);
    var table = document.getElementById("wheel");

    for (i = 0; i < response.message.length; i++) {
        var row = table.insertRow(0);
        var cell = row.insertCell(0);
        cell.innerHTML = response["message"][i];
    }
}

sayHelloCallback({
    message: [
        "Hello, World!"
    ]
})

<div class="w3-container w3-padding-64 w3-center" id="salaries">
    <h2>View Salaries</h2>
    <i class="fa fa-spinner w3-spin" style="font-size:64px"></i>
    <table id="wheel"></table>
</div>