在表中顯示javascript數組，平均分數在一個數組中

我在創建一個具有不同tr和td的表的JavaScript時遇到了一些麻煩。我可以將分數和名稱顯示在displayScores函數中，但這些值不在它們自己的單獨單元格中。當我向數組添加分數和名稱時，我也遇到了一些麻煩，讓displayResults函數顯示適當的平均值。正確的「最高分」會顯示，但添加的分數不會被平均。任何對我遇到的問題的幫助將不勝感激。在表中顯示javascript數組，平均分數在一個數組中

這裏的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; 
};

來源

2016-09-21 TyHink

我沒有碰的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>

來源

2016-09-21 05:33:17

一個不錯的增強可能會顯示新的（或至少跳過之間的空間） –

，將看起來像$（「TBODY＃scores_table TR」）之前清除舊的結果或分數.remove（）在displayScores for循環之前，我想。 –

太棒了，非常感謝。我發誓我嘗試使用displayScores for循環中的索引，但webstorm給了我那些模糊的綠色錯誤之一，並且當我運行它時，數據永遠不會顯示。 – TyHink

在表中顯示javascript數組，平均分數在一個數組中

回答

相關問題