Question

您好我正在尝试创建一个脚本，通过加法或减法计算总数。我遇到的问题是我正在使用的当前JavaScript，我发现它只适用于Starting Amount字段，一次只能使用Bill Amount字段中的一个。例如，如果我在起始金额中输入50，在Bill Amount字段中输入50，它将计算它。如果我添加一行然后输入金额，它仍然只会根据输入到其中一个Bill Amount字段中的金额来调整金额。

不确定为什么但代码在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>

我得到的结果：

Answer 1

这是您想要实现的简化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即可。 billTotal是你欠账单的多少钱。 for...遍历您的数组（技术上是节点列表，但无论如何）输入（在这种情况下是您的所有账单），并将输入value添加到billTotal。最后一行代码只是将billTotal呈现给屏幕。

修改：我更新了上面的CodePen链接。现在这适用于每行多个输入字段。我刚刚将table tr input更改为table tr input.billAmt中的calc()和bill.classList.add("billAmt");中的addBill()。我还在|| 0中添加了calc()，因此如果您将输入数字字段留空，则不会获得NaN。另外，我在description中添加了addBill()字段，以证明它适用于多个输入字段。

编辑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();非常明显。

协助使用calc JavaScript函数

1 个答案: