テーブルにjavascript配列を表示し、配列の平均スコアを

javascriptの配列とは異なるtrとtdのテーブルを作成する際に問題があります。私はdisplayScores関数で表示するスコアと名前を取得できますが、値はそれぞれ別々のセルにはありません。また、配列にスコアと名前を追加するときに適切な平均を表示するdisplayResults関数を取得するのにいくつか問題があります。右の「最高スコア」が表示されますが、追加されたスコアは平均化されません。私が抱えている問題のいずれかの助けがあれば幸いです。ここでテーブルにjavascript配列を表示し、配列の平均スコアを

は、HTMLです：私は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 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; 
};

出典

2016-09-21 TyHink

：

<!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つの項目を配置します。関数内で計算を行い、更新を尊重しました。私は最大値を直接計算しました。 $（「TBODY＃のscores_tableのTR」）のようになります

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>

出典

2016-09-21 05:33:17

素敵な強化が新しい表示する前に古い結果やスコアをクリアすること（または少なくとも間にいくつかのスペースをスキップする）可能性がある –

displayScoresのforループの前に.remove（）と書いてあると思います。 –

素晴らしいです、ありがとうございます。私はdisplayScores forループのインデックスを使ってみることを誓いましたが、webstormは私にその漠然とした緑のエラーの1つを与えていました。データを実際に表示することはありませんでした。 – TyHink

テーブルにjavascript配列を表示し、配列の平均スコアを

答えて

関連する問題