使用calc JavaScript函数的帮助

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

不知道为什么，但是代码在JSFIDLE上不起作用，但是您可以在这里看到代码

财务
桌子{
填充顶部：15px；
}
运输署{
空白：nowrap；
}
钮扣{
光标：指针；
}
财务保持
起始金额：$

要减去金额，请在美元金额前加一个减号（-）

添加行
账单信息
票据金额
日期
评论
期末金额$；0

函数insertRow（）{
var x=document.getElementById（“myTable”）；
变量行=x.insertRow（x.rows.length）；
变量单元格=行插入单元格（0）；
var a=document.createElement（“输入”）；
a、 setAttribute（“类型”、“文本”）；
第1单元：儿童（a）；
var cell1=行插入单元格（1）；
var b=document.createElement（“输入”）；
b、 setAttribute（“类型”、“编号”）；
b、 setAttribute（“id”、“billAmt”）；
b、 setAttribute（“名称”、“编号”）；
b、 setAttribute（“onkeyup”、“calc（this）”）；
第1单元：儿童（b）；
var cell2=行插入单元格（2）；
var c=document.createElement（“输入”）；
c、 setAttribute（“类型”、“日期”）；
细胞2.附属物（c）；
var cell3=行插入单元格（3）；
var d=document.createElement（“输入”）；
d、 setAttribute（“类型”、“文本”）；
第3单元：儿童（d）；
var cell4=行插入单元格（4）；
var e=document.createElement（“按钮”）；
e、 innerText=“删除”；
e、 setAttribute（“id”、“delBtn”）；
e、 setAttribute（“onclick”、“removeow（this）”）；
第4单元：儿童（e）；
}
函数（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；
函数计算（obj）{
var e=obj.id.toString（）；
如果（e=='startAmt'）{
x=数量（目标值）；
y=编号（document.getElementById（'billAmt'）。值）；
}否则{
x=编号（document.getElementById（'startAmt'）。值）；
y=数量（目标值）；
}
z=x+y；
document.getElementById（'total'）。value=z；
document.getElementById（'totalAmt'）。innerHTML=z；
}

我得到的结果是：

以下是您想要实现的目标的简化说明

你可能想换一种方式思考这个问题。看起来您关注的是快速性能（通过使用

calc（this）

），但是有一种更简单的方法来解决您的问题，仍然可以提供良好的性能

以下是我的代码笔中的一个片段：

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;
}

addEventListener

基本上与

onclick

做相同的事情，只是它更灵活。这里的顺序很重要。您希望删除该行，然后计算新成本，否则将计算旧成本

我还补充说：

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

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

---

基本上，当调用

removeRow

时，它会被调用为

e

（我可以将它称为

事件

，或任何东西）作为参数，因为它是从单击事件（或任何事件）调用的

e

包含有用的信息，如

e.target

，它指的是单击的元素<代码>.parentNode.remove（）非常简单。

“不确定原因，但代码在JSFIDLE上不起作用” — .看起来您最终拥有了多个具有相同id的元素。如果您说

document.getElementById（'billAmt'）

，我发现其中有10个元素，我应该返回哪一个？也许只有我找到的第一个？想想看，你也可以通过定义你的函数，比如

window.calc=function（obj），让它在JSFIDLE上工作{

感谢大家对JSFIDLE的帮助。嘿@takendarkk我也看到了你的意思，我明白了，但是什么是计算每一行的最佳方法。当我考虑逻辑时，它应该是startAmt加上billAmt的每个实例将等于totalAmt。JSFIDLE现在正在工作：）嘿@GabeRogan当您只有一个单元格时，代码可以工作，但当您有多个单元格时，代码似乎不太合适。我如何使用您的计算功能来处理我的单元格？谢谢。抱歉，这似乎很模糊，但我指的是每行添加多个单元格。现在，您的代码每行有一个单元格，它可以工作，但我希望总共有5个单元格使用第5个单元格ac实际上是一个按钮。@MarkWhite知道了。我会相应地更新我的答案。@MarkWhite我已经更新了答案。基本上我只需要给账单金额输入一个

类
的
billAmt
，但是请随意阅读我的编辑说明。嘿@GabeRogan，如果你删除一行，你能帮我自动调整金额吗？在要更新金额，您必须先从单元格中删除该编号，然后再删除该编号。否则，如果您仅删除该行，则结束金额将保持不变，直到您编辑另一个单元格编号或添加新编号为止。
function removeRow(e) {
  e.target.parentNode.remove();
}