Wie füge ich einen Wert zu einem Array mit Eingabefeld hinzu?

Question

Ich habe Probleme mit dem Durchschnitt der Punktzahlen, nachdem ich eins in das Eingabefeld eingegeben habe. Kann herausfinden, wo ich falsch liege. Ich bin in der Lage, die Eingabe zum Array hinzuzufügen, aber nicht den Durchschnitt zu berechnen.

var names = ["Ben", "Joel", "Judy", "Anne"]; 
 
var scores = [88, 98, 77, 99]; 
 
var average; 
 
var total = 0; 
 
var highestScore = 0; 
 
var name = ""; 
 

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

 
//validate entries and add to array 
 
var addScore = function() { 
 
    var nameInput = $("nameInput").value; 
 
    var scoreInput = $("scoresInput").value; 
 
    if ((nameInput == "" || scoreInput == "") || (scoreInput < 0 || scoreInput > 100)){ 
 
    alert("You must enter a name and a valid score"); 
 
    } 
 
    else { 
 
    names[names.length] = nameInput; 
 
    scores[scores.length] = scoreInput; 
 
    } 
 
}; 
 
//then calculate the average and highest score 
 
var displayResults = function() { 
 

 
    for (var i = 0; i < scores.length; i++) { 
 
    total = total + scores[i];  
 
    if (scores[i] > highestScore) { 
 
     highestScore = scores[i]; 
 
     name = names[i]; 
 

 
    } 
 
    } 
 
    average = parseInt(total/scores.length); 
 
    $("results_header").innerHTML = ("Results"); 
 
    $("results_text").innerHTML = ("\nAverage score is " + average + "<br>" + "\nHigh score = " + name + " with a score of " + highestScore); 
 

 
}; 
 
//display scores table 
 
var displayScores = function() { 
 
    $("scores_header").innerHTML = ("Scores"); 
 
    $("names").innerHTML = ("Names"); 
 
    $("scores").innerHTML = ("Scores"); 
 
    var table = $("scores_table"); 
 
    for(var i=0; i < names.length;i++) { 
 
    var row = table.insertRow(table.rows.length); 
 
    var cell = row.insertCell(0); 
 
    var cell2 = row.insertCell(1); 
 
    cell.innerHTML = names[i]; 
 
    cell2.innerHTML = scores[i]; 
 
    } 
 
}; 
 

 
window.onload = function() { 
 
    $("add").onclick = addScore; 
 
    $("display_results").onclick = displayResults; 
 
    $("display_scores").onclick = displayScores; 
 
};

<main> 
 
    <h1>Use a Test Score array</h1> 
 

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

 
    <label for="score">Score:</label> 
 
    <input type="text" id="scoresInput"><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"> 
 
    <h2 id="results_header"></h2> 
 
    <p id="results_text"></p> \t 
 
    </div> 
 
    <h2 id="scores_header"></h2> 
 
    <table id="scores_table"> 
 
    <tr> 
 
     <th id="names" align="left"></th> 
 
     <th id="scores" align="left"></th> 
 
    </tr> 
 
    </table> 
 
</main>

Answer 1

sein könnte, weil scoreInput ein String ist (jeder Wert aus einem HTML-Eingang) und damit, wenn Sie versuchen, in displayResults() die neue Partitur zu dem alten hinzufügen, es ist nicht Zahlen hinzufügen, aber eine Zeichenfolge zusammenfassen. Versuchen Umwandlung der Eingabe in einen Number zuerst:

var addScore = function() { 
    var nameInput = $("nameInput").value; 
    // convert score to a Number first... 
    var scoreInput = Number($("scoresInput").value); 

    // make sure `scoreInput` is valid AND in range... 
    if ((nameInput == "" || scoreInput == "") || ((!scoreInput && scoreInput !== 0)|| scoreInput < 0 || scoreInput > 100)){ 
     alert("You must enter a name and a valid score"); 
    } 
    else { 
     names[names.length] = nameInput; 
     scores[scores.length] = scoreInput; 
    } 
}; 

EDIT

Wie @rpadovani sagt, Sie auch total jedes Mal innerhalb displayResults() initialisieren sollte:

var displayResults = function() { 
    total = 0; 

    // ... (the rest of your code) 
}; 

Answer 2

Sie wurde nicht initialisiert total, also wenn Sie total = total + scores[i]; Javascript behandelt es als String tun.

Schreiben Sie einfach var total = 0 zu Beginn der displayResults() Funktion