gespaltet Werte in Schleifen

Question

Ich schlage vor, u dieses Bild zu betrachten Hinzufügen und u schauen dann auf den Code habe ich geschrieben:

function addNumbers() { 
    var splitted = document.getElementById("listInput").value.split(" "); 

    for(i = 0; i <= splitted.length; i+=1) { 
     document.getElementById("resultNumberTotal").value = splitted[i]; 
    } 
} 

ich den Wert aus dem Feld nehme die sagt " Geben Sie eine Liste von Zahlen und/oder Wörtern ein "und ich teile sie auf. Ich habe es geteilt, also habe ich alle Nummern wie "1 2 3" und kann sie hinzufügen. Ich benutze die for-Schleife dafür. Die for-Schleife durchläuft jede Zahl und fügt sie dann hinzu. Aber wenn ich den Knopf drücke, zeigt es mich undefiniert an.

Warum werde ich undefiniert?

Answer 1

Sie werden undefiniert, weil Sie den Wert des letzten Elements des Arrays anzeigen und nicht das Sum ausführen, wie Sie in der Frage erwähnten.

Der folgende Code überschreibt immer den Wert resultNumberTotal durch den Wert splitted[i]. Da Ihre for -Schleife für i <= splitted.length es den Index erreicht, die nicht in dem Array nicht vorhanden ist, wenn Sie eine Immobilie erhalten, die auf ein Objekt nicht existiert, erhalten Sie undefined

for(i = 0; i < splitted.length; i+=1) { 
     document.getElementById("resultNumberTotal").value = splitted[i]; 
    } 

Also, das zu tun Summe, müssen Sie den Code wie

function addNumbers() { 
    var splitted = document.getElementById("listInput").value.split(" "); 
    var total = 0;  
    for(i = 0; i < splitted.length; i++) { 
     var numberValue = +splitted[i]; 
     if(!isNaN(numberValue)){ 
     total = total + numberValue ; 
     } 

    } 
    document.getElementById("resultNumberTotal").value = total; 
} 

Answer 2

Sie müssen bis die Zahlen irgendwie machen hinzuzufügen, entweder den += Operator oder durch so etwas wie .reduce() mit wie ich weiter unten getan haben.

function addNumbers() { 
 
    var val = document.getElementById("listInput").value; 
 
    document.getElementById("resultNumberTotal").value = val.split(" ").reduce(function(runningTotal, currentArrayElement) { 
 
    // make sure the value they typed is a number 
 
    // if not, fail gracefully and simply ignore it 
 
    if (!isNaN(Number(currentArrayElement))) { 
 
     // if it is a number, add it to the running total 
 
     runningTotal+= Number(currentArrayElement); 
 
    } 
 
    return runningTotal; // return the running total 
 
    }, 0); // start with 0 as the initial value for runningTotal 
 
}

<input type="text" id="listInput" placeholder="insert values here..." style="width: 300px;" /> 
 
<button onclick="addNumbers()">Add Numbers</button> 
 

 
<br/> 
 
<br/> 
 
<hr/> 
 

 
Number Total: <input id="resultNumberTotal"/>

Answer 3

function addNumbers() { 
var splitted = document.getElementById("listInput").value.split(" "); 
//make sure that the values are in a number format 
document.getElementById("resultNumberTotal").value = splitted.reduce(function(a, b) {return Number(a) + Number(b);}, 0) 
} 

für die beste Praxis stellen Sie sicher, dass Zahl nur für die Eingabefelder :) viel Glück