Unterstützung mit JavaScript-Funktion calc

Hallo Ich versuche, ein Skript zu erstellen, das eine Summe durch Addition oder Subtraktion berechnet. Das Problem, auf das ich stoße, ist das aktuelle JavaScript, das ich verwendet habe und das nur mit dem Feld Anfangsbetrag und nur einem der Felder Rechnungsbetrag gleichzeitig funktioniert. Wenn ich zum Beispiel 50 in den Startbetrag und 50 in das Feld Rechnungsbetrag eingebe, wird es berechnet. Wenn ich eine Zeile hinzufüge und dann einen Betrag eingabe, wird der Betrag nur noch basierend auf der Eingabe in einen der Rechnungsbetragsfelder angepasst.Unterstützung mit JavaScript-Funktion calc

Nicht sicher warum, aber der Code funktioniert nicht auf jsfiddle, aber Sie können den Code in diesem jsFiddle sehen.

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<title>Finance</title> 
<meta charset="UTF-8"> 
<meta name="finance" content="width=device-width, initial-scale=1.0"> 
<style> 


table { 
padding-top: 15px; 
} 

td { 
white-space: nowrap; 
} 

button { 
cursor: pointer; 
} 

</style> 
</head> 

<body> 

<h1>Financial Keeps</h1> 

<p><b>Starting Amount: &#36; <input type="number" id="startAmt" name="startAmt" onkeyup="calc(this)"/></b></p> 

<p>To subtract an amount place a minus (-) sign infront of the dollar amount.</p> 

<button onclick="insertRow()" id="addRow" >Add Row</button> 

<!--<button onclick="removeRow()" id="delRow" >Delete Row</button>--> 

<table id="myTable"> 
<tr> 
    <th>Bill Info</th> 
    <th>Bill Amount</th> 
    <th>Date</th> 
    <th>Comment</th> 
</tr> 
<tr> 
    <tr> 
    <td><input type="text" id="billInfo"></td> 
    <td><input type="number" id="billAmt" name="number" onkeyup="calc(this)"></td> 
    <td><input type="date" id="date"></td> 
    <td><input type="text" id="commentBox"></td> 
    <!--<td><input style="cursor: pointer;" type="button" id="delBtn" value="Delete" onclick="removeRow(this)"></td>--> 
</tr> 
</table> 

    <input type="hidden" id="total" name="total" value="0" /> 
    <p><b>Ending Amount: &#36; <span id="totalAmt">0</span></b></p> 

    <script type="text/javascript"> 
function insertRow() { 
var x = document.getElementById("myTable"); 
var row = x.insertRow(x.rows.length); 

    var cell = row.insertCell(0); 
    var a = document.createElement("input"); 
     a.setAttribute("type","text"); 
     cell.appendChild(a); 

    var cell1 = row.insertCell(1); 
    var b = document.createElement("input"); 
     b.setAttribute("type","number"); 
     b.setAttribute("id","billAmt"); 
     b.setAttribute("name","number"); 
     b.setAttribute("onkeyup","calc(this)"); 
     cell1.appendChild(b); 

    var cell2 = row.insertCell(2); 
    var c = document.createElement("input"); 
     c.setAttribute("type","date"); 
     cell2.appendChild(c); 

    var cell3 = row.insertCell(3); 
    var d = document.createElement("input"); 
     d.setAttribute("type","text"); 
     cell3.appendChild(d); 

    var cell4 = row.insertCell(4); 
    var e = document.createElement("button"); 
     e.innerText = "Delete"; 
     e.setAttribute("id","delBtn"); 
     e.setAttribute("onclick","removeRow(this)"); 
     cell4.appendChild(e); 
} 

function removeRow(elem) { 
var table = elem.parentNode.parentNode.parentNode; 
var rowCount = table.rows.length; 
var row = elem.parentNode.parentNode; 
row.parentNode.removeChild(row); 
} 

var x = 0; 
var y = 0; 
var z = 0; 
function calc(obj) { 
var e = obj.id.toString(); 
if (e == 'startAmt') { 
x = Number(obj.value); 
y = Number(document.getElementById('billAmt').value); 
} else { 
    x = Number(document.getElementById('startAmt').value); 
    y = Number(obj.value); 
    } 
    z = x + y; 
    document.getElementById('total').value = z; 
    document.getElementById('totalAmt').innerHTML = z; 
} 
</script> 
</body> 
</html>

Das Ergebnis erhalte ich:

Quelle

2017-03-13 Mark White

_ "Nicht sicher warum, aber der Code funktioniert nicht auf JSFiddle" _ - [da müssen Sie die Umbruchmethode auf ''] (http://stackoverflow.com/q/7043649/4642212) festlegen. – Xufox

Sieht aus, als ob Sie mehrere Elemente mit der gleichen ID haben. Wenn du 'document.getElementById ('billAmt') 'sagst und ich 10 davon finde, welche sollte ich zurückgeben? Vielleicht nur die erste, die ich finde? Denk darüber nach. – csmckelvey

Sie können es auch auf JSFiddle arbeiten lassen, indem Sie Ihre Funktionen definieren wie 'window.calc = function (obj) {' –

Hier ist ein vereinfachtes working CodePen von dem, was Sie erreichen wollen.

Vielleicht möchten Sie etwas anders über das Problem nachdenken. Es scheint, dass Sie sich auf schnelle Leistung konzentrieren (indem Sie calc(this) verwenden), aber es gibt eine viel einfachere Möglichkeit, Ihr Problem zu lösen, das immer noch gute Leistung liefert.

Hier ist ein Ausschnitt aus meinem CodePen:

function calc() { 
    var money = parseInt(document.querySelector('#money').value) || 0; 
    var bills = document.querySelectorAll('table tr input.billAmt') ; 
    var billTotal = 0; 

    for (i = 0; i < bills.length; i++) { 
     billTotal += parseInt(bills[i].value) || 0; 
    } 

    totalAmt.innerHTML = money - billTotal; 
}

var money... und var bills... nur die input s aus dem DOM greifen. billTotal ist, wie viel Sie in Rechnungen schulden. for... durchläuft Ihr Array (technisch Knotenliste, aber was auch immer) von Eingaben (in diesem Fall alle Ihre Rechnungen) und fügt die value der Eingabe zu billTotal hinzu. Die letzte Codezeile rendert nur den billTotal auf dem Bildschirm.

Bearbeiten: Ich habe den obigen CodePen-Link aktualisiert. Jetzt funktioniert das mit mehreren Eingabefeldern pro Zeile. Ich habe gerade table tr input zu table tr input.billAmt in calc() und bill.classList.add("billAmt"); in addBill() geändert. Auch habe ich || 0 in calc() hinzugefügt, so dass Sie NaN nicht erhalten, wenn Sie die Eingabe Anzahl Felder leer lassen. Außerdem habe ich ein description Feld in addBill() hinzugefügt, nur um zu beweisen, dass es mit mehreren Eingabefeldern funktioniert.

Edit 2 Ich aktualisierte den CodePen. Habe ich nur noch diese:

var deleteBtn = document.createElement('button'); 
deleteBtn.innerHTML = "Delete"; 
deleteBtn.addEventListener("click", removeRow); 
deleteBtn.addEventListener("click", calc);

addEventListener im Grunde macht das Gleiche wie onclick außer es viel flexibler ist. Die Reihenfolge hier ist wichtig. Sie möchten die Zeile entfernen, dann berechnen Sie die neue Kosten, sonst wird es die alten Kosten berechnen.

Ich habe auch diese:

function removeRow(e) { 
    e.target.parentNode.remove(); 
}

Grundsätzlich, wenn removeRow aufgerufen wird, es mit e aufgerufen wird als Parameter (i sie haben könnte event, oder irgendetwas genannt), weil es von einem Click-Ereignisse aufgerufen wurde (oder irgendein Ereignis). e enthält nützliche Informationen wie e.target, die sich auf das Element bezieht, auf das geklickt wurde..parentNode.remove(); ist ziemlich selbsterklärend.

Quelle

2017-03-13 19:03:14

Hey @GabeRogan der Code funktioniert, wenn Sie nur 1 Zelle haben, aber es scheint nicht zu mögen, wenn Sie mehr als eine Zelle haben. Wie könnte ich Ihre Berechnungsfunktion verwenden, um mit meiner zu arbeiten? Vielen Dank. –

Entschuldigung, das scheint vage, aber ich beziehe mich auf das Hinzufügen von mehr als einer Zelle pro Zeile. Jetzt hat Ihr Code 1 Zelle pro Zeile und es funktioniert, aber ich möchte insgesamt 5 Zellen, wobei die fünfte Zelle tatsächlich eine Schaltfläche ist. –

@MarkWhite Verstanden. Ich werde meine Antwort entsprechend aktualisieren. –

Unterstützung mit JavaScript-Funktion calc

Antwort

Verwandte Themen