協助Calc語言的JavaScript函數

你好，我正在嘗試創建一個腳本，將通過加法或減法來計算總數。我遇到的問題是當前使用的JavaScript，我發現只適用於起始金額字段和一次只有一個賬單金額字段。例如，如果我在開始金額中輸入50，並在賬單金額字段中輸入50，它將計算它。如果我添加一行然後輸入一個金額，它仍然只會根據什麼輸入到賬單金額字段之一來調整金額。協助Calc語言的JavaScript函數

不知道爲什麼，但代碼不能在jsfiddle上運行，但您將能夠看到此代碼在此jsFiddle。

<!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>

結果我得到：

來源

2017-03-13 Mark White

_「不知道爲什麼，但代碼無法在JSFiddle上運行」_ - [因爲您需要將wrap方法設置爲'']（http://stackoverflow.com/q/7043649/4642212）。 – Xufox

看起來你最終有多個具有相同ID的元素。如果你說'document.getElementById（'billAmt'）'我找到了10個，我應該返回哪一個？也許只有我找到的第一個？想想看。 – csmckelvey

你也可以通過定義你的函數，例如'window.calc = function（obj）{' –

這裏有你想要達到什麼樣的簡化working CodePen。

您可能想要以不同的方式思考問題。看起來你專注於快速性能（通過使用calc(this)），但解決問題的方法卻更加簡單，仍然能夠提供良好的性能。

下面是從我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...和var bills...剛剛從DOM搶input秒。賬單中欠你多少錢。 for...通過您的數組（技術上節點列表，但不管）輸入（在本例中爲您的所有賬單）循環，並將輸入的value添加到billTotal。最後一行代碼只是將billTotal呈現在屏幕上。

編輯：我更新了上面的CodePen鏈接。現在這可以在每行有多個輸入字段。我剛剛在calc()和bill.classList.add("billAmt");addBill()更改table tr input到table tr input.billAmt。此外，我還在calc()中添加了|| 0，因此如果將輸入號碼字段留空，則不會得到NaN。此外，我還在addBill()中添加了一個description字段，以證明它適用於多個輸入字段。

編輯2我更新了CodePen。我只是說這個：

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

addEventListener基本上做同樣的事情，除了onclick它是很多更靈活。這裏的命令很重要。你想刪除該行，那麼計算新的的成本，否則它會計算出的舊的成本。

我還添加了這一點：

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

基本上當removeRow被調用時，它會調用e（我可能已經把它稱爲event，或任何東西）作爲參數，因爲它是從一個點擊事件調用（或任何事件）。 e包含有用的信息，如e.target，它指的是被點擊的元素。.parentNode.remove();是不言自明的。

來源

2017-03-13 19:03:14

嘿@GabeRogan代碼在你只有1個單元格的情況下工作，但當你有多個單元格時，它似乎並不喜歡。我怎麼能使用你的計算功能與我的工作？謝謝。 –

對不起，這似乎很模糊，但我指的是每行添加多個單元格。現在你的代碼每行有1個單元格，它可以工作，但我希望總共有5個單元格，第5個單元格實際上是一個按鈕。 –

@MarkWhite明白了。我會相應地更新我的答案。 –

協助Calc語言的JavaScript函數

回答

相關問題