CODEWITHSUNDEEP
javascriptarrays
TyHink
TyHink

Reputation: 3

show javascript array in table, average scores in an array

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.

Here's the html: 

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

    <label for="name">Name:</label>
    <input type="text" id="name"><br>

    <label for="score">Score:</label>
    <input type="text" id="score"><br>

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

    <div id="results"></div>
    <table id="scores_table"></table>
</main>
</body>
</html>

and here's the javascript I'm working with:

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 < 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 < 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;
};

Upvotes: 0

Views: 2625

Answers (1)

Jeremy Kahan
Jeremy Kahan

Reputation: 3826

I did not touch the html. I did get rid of the sort, because it took people away from scores. I put one item per cell by adding indices to the array call. I took the calculations inside the function so they honored updates. I calculated the max directly.

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 Results = function () {
  var sum = 0;
  var high=0;
  var j;
for( var i = 0; i < scores.length; i++ ){
    j = parseInt(scores[i],10);
    sum += j;
    if (j>high) high=j; 
}

var avg = sum/scores.length;


    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 = " + high);
    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 < scores.length; i++) {
        var row = tBody.insertRow(-1);
        var textNode = document.createTextNode(names[i]);
        var cellNode = row.insertCell(-1);
        cellNode.appendChild(textNode);
        var scoreNode = document.createTextNode(scores[i]);
        var cellNode2 = row.insertCell(-1);
        cellNode2.appendChild(scoreNode);
    }

};

window.onload = function () {
    $("add").onclick = addScore;
    $("display_results").onclick = displayResults;
    $("display_scores").onclick = displayScores;
};
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Test Score Array</title>
    <link rel="stylesheet" href="styles.css" />
    <script src="test_scores.js"></script>
</head>
<body>
<main>
    <h1>Use a Test Score array</h1>

    <label for="name">Name:</label>
    <input type="text" id="name"><br>

    <label for="score">Score:</label>
    <input type="text" id="score"><br>

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

    <div id="results"></div>
    <table id="scores_table"></table>
</main>
</body>
</html>

Upvotes: 1

Related Questions