Question

我在使用javascript中的数组创建一个包含不同tr和td的表时遇到了一些麻烦。我可以在displayScores函数中显示得分和名称，但这些值不在他们自己的单独单元格中。当我向数组添加分数和名称时，我也很难让displayResults函数显示正确的平均值。正确的＆＃34;最高分＆＃34;将显示，但增加的分数不会得到平均。对我遇到的任何问题的任何帮助将不胜感激。

这是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>

以及我正在使用的javascript：

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

Answer 1

我没有碰到html。我确实摆脱了这种情况，因为它让人们远离了分数。我通过向数组调用添加索引来为每个单元格放置一个项目。我在函数内部进行了计算，以便更新。我直接计算了最大值。

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>

在表格中显示javascript数组，在数组中显示平均分数

1 个答案: