CODEWITHSUNDEEP
javascriptfunctionhtml-tablegetelementbyid
Joe Morales
Joe Morales

Reputation: 941

Creating a table with getElementById only shows last instance

I'm using a very simple function to present within a table the name of a person and their age given by the user through a prompt window. The only problem I'm having is that whenever the user adds a second name and age, JS replaces the previous one. It won't add a second row.

http://jsbin.com/jamobifu

JS

function table(){
    var numberOfPeople = window.prompt("How many people do you want to add?");

    /**/for(var count = 0; count < numberOfPeople; count++){
        var name = window.prompt("Type the name of the person");
        var age = window.prompt("Type their age");
        document.getElementById("tableOfPeople").innerHTML += "<tr><td>" + name + "</td><td>" + age + "</td></tr>";
    }
}

HTML

<h1>Making A List</h1>
<p>This program will create a list based on two question which will be asked to you. Type the name of the person and their corresponding age. Output will be presented in a customized table.</p>
<input type="button" value="Create List" onclick="table()" />
<table id="tableOfPeople" style="width: 600px; margin-left: auto; margin-right: auto; margin-top: 50px; background-color: #74a9cb; color: white; border: 1px solid #127bbb"></table>

Upvotes: 0

Views: 975

Answers (4)

Ben
Ben

Reputation: 913

This is because you are replacing the innerHTML with the new table row, not adding to it. You can solve this pretty easily by replacing

document.getElementById("tableOfPeople").innerHTML = "<tr><td>" + name + "</td><td>" + age + "</td></tr>";

With:

document.getElementById("tableOfPeople").innerHTML += "<tr><td>" + name + "</td><td>" + age + "</td></tr>";

The += operator adds to the existing value. For example, the following code:

a = 4;
a += 2;
alert(a); //alerts 6

As @cookiemonster pointed out, there are numerous caveats to this approach. The cost of using .innerHTML to alter the DOM is high and destructive. It requires the DOM to be parsed into a string, the string altered, then parsed back into the DOM. This process destroys any event listeners or other information you may have had on the elements.

It will also make things more difficult as you wish to extend the functionality of the code, to add things like the ability to delete rows.

@RobG has presented a much better solution, and as he points out .innerHTML can fail in various versions of IE.

Upvotes: 0

RobG
RobG

Reputation: 147413

You shouldn't use innerHTML to modify the contents of a table as it will fail in versions of IE upto and including 9 at least (where innerHTML is readonly for a number of table related elements*). So you should be using DOM insertRow and insertCell methods (or createElement and appendChild, but the insert methods do two steps in one):

var row = document.getElementById("tableOfPeople").insertRow(-1);
var cell = row.insertCell(-1);
cell.appendChild(document.createTextNode(name));
cell = row.insertCell(-1);
cell.appendChild(document.createTextNode(age));

* MSDN::innerHTML property

The innerHTML property is read-only on the col, colGroup, frameSet, html, head, style, table, tBody, tFoot, tHead, title, and tr objects.

Upvotes: 2

Brad The Developer
Brad The Developer

Reputation: 345

Your problem is right here. Every time the user adds a new name you are replacing the old information instead of adding to it. Any time the innerHTML method is called on an element it will delete the old HTML information inside of the element. 

document.getElementById("tableOfPeople").innerHTML = "<tr><td>" + name + "</td><td>" + age + "</td></tr>";

What you could do is store this information to a variable and then add that with the new information.

Something along the lines of:

var information = document.getElementById("tableOfPeople").innerHTML;

document.getElementById("tableOfPeople").innerHTML = information + "<tr><td>" + name + "</td><td>" + age + "</td></tr>";

Upvotes: 0

4EACH
4EACH

Reputation: 2197

You Forgot += instead =

function table(){
    var numberOfPeople = window.prompt("How many people do you want to add?");

    /**/for(var count = 0; count < numberOfPeople; count++){
        var name = window.prompt("Type the name of the person");
        var age = window.prompt("Type their age");
        document.getElementById("tableOfPeople").innerHTML += "<tr><td>" + name + "</td><td>" + age + "</td></tr>";
    }
}

Upvotes: 0

Related Questions