Die Summe der Benutzereingaben nehmen und als Variable speichern

Question

Wie berechnet man am besten die Summe der Benutzereingaben eines Arrays und speichert diesen Wert dann als Variable?

Ich habe hier eine Funktion, die ein Array aus Benutzereingaben (number4 []) erstellt.

var counter = 1;

var limit = 3; 

function addInput(divName){ 

    if (counter == limit) { 

      alert("You have reached the limit of adding " + counter + " inputs"); 

    } 

    else { 

      var newdiv = document.createElement('div'); 

      newdiv.innerHTML = "Asset($) " + (counter + 1) + " <br><input type='text' name='number4[]'>"; 

      document.getElementById(divName).appendChild(newdiv); 

      counter++; 

    } 

<div class="container7"> 

     <div id ="dynamicInput"> 
     Assets 1($): <INPUT type="text" name="number4[]"> 
     </div> 

     Liabilities 1(%): <INPUT type="text" name="number5"> 

     Result($): <INPUT type="text" name="total1"> 

     <INPUT type="button" style="background-color:#FF8800; border-color:BLACK;" value="Calculate"onclick="javascript:networth()"> 



     <INPUT type="button" style="background-color:#FF8800; border-color:BLACK;" value="Add asset fields"onclick="addInput('dynamicInput');"> 

    </div> 

</FORM> 

Ich habe keinen Code für total1 noch. also im Grunde habe ich das Array, ich brauche nur Hilfe, die Summe zu identifizieren und sie dann als Variable zuzuordnen.

Answer 1

document.getElementsByName("number4[]") wird ein Array der Elemente kehren Sie

function networth(){ 
    var totNo = document.getElementsByName("number4[]").length; 
    var sum = 0; 

    for(var i=0; i<totNo; i++){ 
     sum += parseInt(document.getElementsByName("number4[]")[i].value); 
     console.log(sum); 
    } 
} 

Answer 2

eine id Ihre Eingabeelemente hinzufügen und verwenden var val1 = document.getElementById ("die ID des Eingangs Sie wollen"). Value // repete für val2 ... mit einer anderen ID und fügen Sie den val Variablen

Answer 3

Sie müssen alle Eingabeelemente, die Sie summieren möchten, erhalten. Sie können querySelectorAll verwenden, um alle Elemente mit einem gemeinsamen CSS-Selektor für alle Eingaben zu erhalten, die Sie zusammenfassen möchten. https://www.w3schools.com/jsref/met_document_queryselectorall.asp

Schließlich können Sie die Eingabe in der gleichen Weise mit QuerySelector erhalten, da nur eine gibt es keine Notwendigkeit, die All-Variante zu verwenden. https://www.w3schools.com/jsref/met_document_queryselector.asp

var counter = 1; 
 
var limit = 3; 
 
function networth(){ 
 
    var inputs = document.querySelectorAll("form #dynamicInput input"); 
 
    var networth = 0; 
 
    for (var i = 0; i < inputs.length; i++) { 
 
    networth += parseFloat(inputs[i].value); 
 
    } 
 
    document.querySelector("input[name=total1]").value=networth; 
 
} 
 
function addInput(divName) { 
 
    if (counter == limit) { 
 
    alert("You have reached the limit of adding " + counter + " inputs"); 
 
    } else { 
 
    var newdiv = document.createElement('div'); 
 
    newdiv.innerHTML = "Asset($) " + (counter + 1) + 
 
     " <br><input type='text' name='number4[]'>"; 
 
    document.getElementById(divName).appendChild(newdiv); 
 
    counter++; 
 
    } 
 
}

<form> 
 
    <div class="container7"> 
 

 
    <div id="dynamicInput"> 
 
     Assets 1($):<br> 
 
     <INPUT type="text" name="number4[]"> 
 
    </div> 
 

 
    Liabilities 1(%): 
 
    <INPUT type="text" name="number5"> Result($): 
 

 
    <INPUT type="text" name="total1"> 
 

 
    <INPUT type="button" style="background-color:#FF8800; border-color:BLACK;" value="Calculate" onclick="javascript:networth()" /> 
 

 
    <INPUT type="button" style="background-color:#FF8800; border-color:BLACK;" value="Add asset fields" onclick="addInput('dynamicInput');" /> 
 

 
    </div> 
 

 
</FORM>