I'm stuck trying to create dynamic leaderboard with javascript

Question

Basically, I'm just trying to create a table that automatically updates once a user fills out the player name and player score field and presses submit. I am trying to make this dynamic with only pure javascript.

Here's the HTML:

    <table style="width:100%" id="player">
      <tr>
        <td>Player</td>
        <td>Score</td>
      </tr>
    </table>
  </br>
    </br>

  <form>
    Player Name: <input type="text" name="FirstName" id="player_name"><br>
    Player Score: <input type="text" name="LastName" id="player_score"><br>
    <input type="submit" onclick= "submittedData()">
</form>


    <script type="text/javascript" src="index.js"></script>

So, I have the table and the input fields all market with an ID, so I can grab it via the getElementByID() function.

var player = 0, score, newTablerow;


function getID(x){
  document.getElementById(x);
}


function submittedData(){

player = getID("player_name").value;
score = getID("player_score").value;
newTablerow = getID("player");


var a = document.createElement("TR");
var b = document.createTextNode(player);
a.appendChild(b);
var c = document.createElement("TD");
var d = document.createTextNode(score);
c.appendChild(d);

getID("player").appendChild(a);
getID("player").appendChild(c);


}

When I click the button after entering the info, nothing happens. No rows are being created and I feel like there's obviously something wrong with the way I'm dynamically creating the rows. Also, it looks extremely ugly with all the variables, so I'm wondering if there's a way to make it less code intensive. So basically, this is very simple where a user just enters the player's name and score in an input field, and the player's name and score is automatically added to the table.

The console isn't giving me any error messages, either.

Any help/hints/tips would be greatly appreciated.

Answer 1

From MDN appendChild :

The returned value is the appended child.

So when you write:

var x = a.appendChild(b);
...
var y = c.appendChild(d);

x and y become b and d respectively, not a and c as it seems you're assuming.

To fix your problem, redefine your submittedData as something like the following:

function submittedData(){

player = getID("player_name").value;
score = getID("player_score").value;
newTablerow = getID("player");

var tr   = document.createElement("TR");
var td1  = document.createElement("TD");
var td2  = document.createElement("TD");
var name = document.createTextNode(player);
var top  = document.createTextNode(score);

td1.appendChild(name);
td2.appendChild(top);

tr.appendChild(td1);
tr.appendChild(td2);

getID("player").appendChild(tr);

}

Another reason why your intermediate solution didn't work is because with your JavaScript you were initially creating a DOM that looked like this:

<table id="player">
    ...
    <!-- attempted to append the following -->
    <tr> <!-- a -->
        player <!-- b -->
    </tr>
    <td> <!-- c -->
        score <!-- d -->
    </td>
</table>

While my solution creates this:

<table id="player">
    ...
    <!-- attempted to append the following -->
    <tr> <!-- tr -->
        <td> <!-- td1 -->
            player <!-- name -->
        </td>
        <td> <!-- td2 -->
            score <!-- top -->
        </td>
    </tr>
</table>

Helpful hint: Use meaningful variable names so you can see what you're doing more clearly.

Answer 2

Make following method to return a value:

var getID = function(x){
  return document.getElementById(x);
}

Also, the way that you were appending new elements was a bit messed up. I'd suggest to use descriptive variable names. Following is a working version:

var submitData = function (){

    var player = getID("player_name").value;
    var score = getID("player_score").value;

    var playerCell = document.createElement("TD");
    var playerCellText = document.createTextNode(player);
    playerCell.appendChild(playerCellText);

    var scoreCell = document.createElement("TD");
    var scoreCellText = document.createTextNode(score);
    scoreCell.appendChild(scoreCellText);

    var row = document.createElement("TR");
    row.appendChild(playerCell);
    row.appendChild(scoreCell);

    getID("player").appendChild(row);
};

And finally, since you don't want to post your data to server side, make the button not to be a submit one:

<input type="button" onclick= "submitData()" value="Submit"/>

See JSFiddle demo