show javascript array in table, average scores in an array
<p>I'm having some trouble with creating a table with different tr's and td's from an array in javascript. I can get the scores and names to display in the displayScores function, but the values aren't in their own separate cells. I'm also having some trouble getting the displayResults function to show the proper average when I add a score and name to the array. The right "highest score" will show but the added scores don't get averaged. Any help with any of the problems I'm having would be greatly appreciated. </p>

<p>Here's the html: </p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;Test Score Array&lt;/title&gt;
    &lt;link rel="stylesheet" href="styles.css" /&gt;
    &lt;script src="test_scores.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;main&gt;
    &lt;h1&gt;Use a Test Score array&lt;/h1&gt;

    &lt;label for="name"&gt;Name:&lt;/label&gt;
    &lt;input type="text" id="name"&gt;&lt;br&gt;

    &lt;label for="score"&gt;Score:&lt;/label&gt;
    &lt;input type="text" id="score"&gt;&lt;br&gt;

    &lt;label&gt;&amp;nbsp;&lt;/label&gt;
    &lt;input type="button" id="add" value="Add to Array" &gt;
    &lt;input type="button" id="display_results" value="Display Results" &gt;
    &lt;input type="button" id="display_scores" value="Display Scores" &gt;&lt;br&gt;

    &lt;div id="results"&gt;&lt;/div&gt;
    &lt;table id="scores_table"&gt;&lt;/table&gt;
&lt;/main&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>and here's the javascript I'm working with:</p>

<pre><code>var names = ["Ben", "Joel", "Judy", "Anne"];
var scores = [88, 98, 77, 88];

var $ = function (id) {
    return document.getElementById(id);
};

var addScore = function () {
    names.push($("name").value);
    scores.push($("score").value);
};

var sum = 0;
for( var i = 0; i &lt; scores.length; i++ ){
    sum += parseInt( scores[i], 10 );
}

var avg = sum/scores.length;

var Results = function () {

    var h2Node = document.createElement("h2");
    var h2TextNode = document.createTextNode("Results");
    h2Node.appendChild(h2TextNode);
    document.body.appendChild(h2Node);
    var avgNode = document.createElement("p");
    var avgTextNode = document.createTextNode("Average Score = " + avg);
    avgNode.appendChild(avgTextNode);
    document.body.appendChild(avgNode);
    var highestNode = document.createElement("p");
    var highestTextNode = document.createTextNode("Highest Score = " + scores[0]);
    highestNode.appendChild(highestTextNode);
    document.body.appendChild(highestNode);

};

var displayResults = function () {

    $("results");
    scores.sort(function(a, b){return b-a});
    Results();

};

var displayScores = function () {
    var table = $("scores_table");
    var tBody = table.tBodies[0];
    if (tBody == undefined) {
        tBody = document.createElement("tBody");
        table.appendChild(tBody);
    }
    for (i = 0; i &lt; scores.length; i++) {
        var row = tBody.insertRow(-1);
        var textNode = document.createTextNode(names);
        var cellNode = row.insertCell(-1);
        cellNode.appendChild(textNode);
        var scoreNode = document.createTextNode(scores);
        var cellNode2 = row.insertCell(-1);
        cellNode2.appendChild(scoreNode);
    }

};

window.onload = function () {
    $("add").onclick = addScore;
    $("display_results").onclick = displayResults;
    $("display_scores").onclick = displayScores;
};
</code></pre>