如何使用Javascript从输入值中获取总和？_Javascript_Html_Css

如何使用Javascript从输入值中获取总和？

javascript html css

如何使用Javascript从输入值中获取总和？,javascript,html,css,Javascript,Html,Css,我对Javascript相当陌生，并且使用DOM。我正在尝试将用户的输入值添加到总数中。每次他们为贷记或借记增加一个值，就会将其加到总数中。我所做的每一次尝试都会导致NaN、undefined或其他错误。我需要一个for循环还是有一个更简单的方法以下是完整的代码：我的Javascript代码段（用于添加总计）： if（document.getElementsByTagName（'select'）[0].selectedIndex==1）{ 交易。追加子项（借方）； text=document

我对Javascript相当陌生，并且使用DOM。我正在尝试将用户的输入值添加到总数中。每次他们为贷记或借记增加一个值，就会将其加到总数中。我所做的每一次尝试都会导致NaN、undefined或其他错误。我需要一个for循环还是有一个更简单的方法

以下是完整的代码：

我的Javascript代码段（用于添加总计）：

if（document.getElementsByTagName（'select'）[0].selectedIndex==1）{
交易。追加子项（借方）；
text=document.createTextNode（“借方”）；
td2.追加子项（文本）；
var money=document.querySelector（'input[type=“number”]”）。值；
货币=浮动（货币）。固定（2）；
var合计=0；
for（var i=0；i.total.debits'）。innerHTML=total；
evt.target.reset（）；

}

我的HTML：

<body>
<section class="wrapper">
    <h1>Transaction Tracker</h1>
    <form class="transaction-frm">
        <fieldset>
            <legend>Add Transaction</legend>
            <div class="frm-group">
                <input class="frm-control" type="text" name="description" size="30" placeholder="description" />
            </div>
            <div class="frm-group">
                <select class="frm-control" name="type">
                    <option value="">type</option>
                    <option value="debit">debit</option>
                    <option value="credit">credit</option>
                </select>
            </div>
            <div class="frm-group">
                <i class="edit fa fa-dollar"></i>
                <input class="frm-control" type="number" name="currency" min="0" max="9999" step="0.01" size="4" placeholder="0.00" />
            </div>
            <div class="frm-group">
                <input class="frm-control" type="submit" value="add" />
            </div>
            <div class="error"></div>
        </fieldset>
    </form>


    <h2>Transactions</h2>


    <table class="transactions">
        <thead>
            <tr>
                <td colspan="4" class="right">
                    Total debits: <span class="total debits">$0.00</span>
                    Total credits: <span class="total credits">$0.00</span>
                </td>
            </tr>
            <tr>
                <th>Description</th>
                <th>Type</th>
                <th class="amount">Amount</th>
                <th class="tools">Tools</th>
            </tr>
        </thead>
        <tbody>

        </tbody>
    </table>
</section>
<script src="js/main.js"></script>


事务跟踪器
添加事务
类型
借记
信用
交易
借项总额：0.00美元
学分总额：0.00美元
描述
类型
数量
工具

我检查了您制作的小提琴，只要表单字段填写正确，事务列表似乎不会抛出任何错误

添加到字段的验证检查在解析为无效后需要返回语句

问题是，如果未输入任何数据，则该值将被解析为NaN，并且即使在显示警告说该值无效后，您仍在为该值添加一行。（因为即使输入值无效，函数也不会退出）

货币类型->小数点后有2个字符的数字

var total = 0;

for (var i = 0; i < money.length; i++) {

money[i]（字符串变量）。值未定义，因此 parseInt（未定义）=NaN-表示不是数字

    total += parseInt(money[i].value);
}

所以你不需要回路，只要

total += parseInt(money)

您需要在事件之外声明所有变量

`var debitTotal = 0.0, creditTotal = 0.0;`

当你试图得到总数的时候，你转换的次数也太多了。这是不必要的，你可以只添加浮点数。从

money=parseFloat（money）.toFixed（2）

中删除

.toFixed（2）

toFixed（2）

将值转换为字符串。同时删除循环的

。您所需要的只是：

var money = document.querySelector('input[type="number"]').value;
money = parseFloat(money);
debitTotal += money;

要得到你的总数。然后，要显示总数，可以添加

.toFixed（2）
我对学分也做了同样的事情
这是更新后的脚本。如果用此脚本替换当前的JSFIDLE脚本，则此脚本应该可以工作。
它获取范围中的当前值并删除$，然后添加到其中。
然后，为了使它看起来好看，它在小数点后设置一个固定长度，并在前面加上一个美元符号。最后将跨度值更新为新的总计。
如果您计划能够删除节点，则需要对其进行修改。
如果您确实实现了删除，那么您将读取节点类型和值以及负号，而不是add
document.querySelector('form').addEventListener('submit', function(evt) {

  var transactions = document.querySelector('tbody');
  var debit, credit, moneyText, descriptionText,
    error, td, td2, td3, td4, td5, td6, td7, td8, i, i2;

  description = document.querySelector('input[type="text"]').value;
      money = document.querySelector('input[type="number"]').value;
      money = parseFloat(money).toFixed(2);


  if (document.getElementsByTagName('select')[0].selectedIndex == 0) {
    alert("Please select a payment option");
    document.getElementsByTagName('select')[0].focus();
  }
  if (document.querySelector('input[type="text"]').value == "") {
    alert("Please enter a description");
    document.querySelector('input[type="text"]').focus();
  }

  if (document.querySelector('input[type="number"]').value < 0 || document.querySelector('input[type="number"]').value == "") {
    alert("Please enter a number over 0");
    document.querySelector('input[type="number"]').focus();
  }

  debit = document.createElement('tr');
  credit = document.createElement('tr');
  debitDescriptionText = document.createTextNode(description);
  debitMoneyText = document.createTextNode(money);
  creditDescriptionText = document.createTextNode(description);
  creditMoneyText = document.createTextNode(money);

  td = document.createElement('td');
  td2 = document.createElement('td');
  td3 = document.createElement('td');
  td4 = document.createElement('td');

  td5 = document.createElement('td');
  td6 = document.createElement('td');
  td7 = document.createElement('td');
  td8 = document.createElement('td');

  i = document.createElement('i');
  i2 = document.createElement('i');

  debit.setAttribute('class', 'debit');
  credit.setAttribute('class', 'credit');
  td3.setAttribute('class', 'amount');
  td4.setAttribute('class', 'tools');
  td7.setAttribute('class', 'amount');
  td8.setAttribute('class', 'tools');

  i.setAttribute('class', 'delete fa fa-trash-o');
  i2.setAttribute('class', 'delete fa fa-trash-o');

  sign = document.createTextNode("$");
  td3.appendChild(sign);

  sign = document.createTextNode("$");
  td7.appendChild(sign);

  debit.appendChild(td);
  debit.appendChild(td2);
  debit.appendChild(td3);
  debit.appendChild(td4);
  td.appendChild(debitDescriptionText);
  td3.appendChild(debitMoneyText);
  td5.appendChild(creditDescriptionText);
  td7.appendChild(creditMoneyText);

  td4.appendChild(i);
  credit.appendChild(td5);
  credit.appendChild(td6);
  credit.appendChild(td7);
  credit.appendChild(td8);
  td8.appendChild(i2);


  if (document.getElementsByTagName('select')[0].selectedIndex == 1) {
    transactions.appendChild(debit);
    text = document.createTextNode("debit");
    td2.appendChild(text);

    var money = document.querySelector('input[type="number"]').value;


    document.querySelector('.right > .total.debits').innerHTML ="$"+(parseInt(document.querySelector('.right > .total.debits').innerText.replace("$",""))+parseFloat(money)).toFixed(2);

    evt.target.reset();
  }

  if (document.getElementsByTagName('select')[0].selectedIndex == 2) {
    transactions.appendChild(credit);
    text = document.createTextNode("credit");
    td6.appendChild(text);

    var money = document.querySelector('input[type="number"]').value;


    document.querySelector('.right > .total.credits').innerHTML ="$"+(parseInt(document.querySelector('.right > .total.credits').innerText.replace("$",""))+parseFloat(money)).toFixed(2);


    evt.target.reset();
  }

  evt.preventDefault();

});

document.querySelector('.transactions').addEventListener('click', function(evt) {
  // check for click on an arrow
  var target = evt.target.parentNode;
  var trash = target.parentNode;

  if (evt.target.classList.contains('delete')) {
    trash.remove(target);
  }
});

document.querySelector（'form'）。addEventListener（'submit'，函数（evt）{
var事务=document.querySelector（'tbody'）；
var借方、贷方、moneyText、descriptionText、，
误差，td，td2，td3，td4，td5，td6，td7，td8，i，i2；
description=document.querySelector（'input[type=“text”]”）。值；
money=document.querySelector（'input[type=“number”]”）。值；
货币=浮动（货币）。固定（2）；
if（document.getElementsByTagName（'select'）[0].selectedIndex==0）{
警报（“请选择付款选项”）；
document.getElementsByTagName（'select'）[0].focus（）；
}
if（document.querySelector（'input[type=“text”]”），值==“”）{
警报（“请输入说明”）；
document.querySelector（'input[type=“text”]）.focus（）；
}
if（document.querySelector（'input[type=“number”]'））.value<0 | | document.querySelector（'input[type=“number”]）。value==“”）{
警报（“请输入一个大于0的数字”）；
document.querySelector（'input[type=“number”]）.focus（）；
}
借方=document.createElement（'tr'）；
信用=document.createElement（'tr'）；
debitDescriptionText=document.createTextNode（描述）；
debitMoneyText=document.createTextNode（货币）；
creditDescriptionText=document.createTextNode（描述）；
creditMoneyText=document.createTextNode（货币）；
td=document.createElement（'td'）；
td2=document.createElement（'td'）；
td3=document.createElement（'td'）；
td4=document.createElement（'td'）；
td5=document.createElement（'td'）；
td6=document.createElement（'td'）；
td7=document.createElement（'td'）；
td8=document.createElement（'td'）；
i=document.createElement（'i'）；
i2=document.createElement（'i'）；
debit.setAttribute（'class'，'debit'）；
setAttribute（'class'，'credit'）；
td3.setAttribute（'class'，'amount'）；
td4.setAttribute（'class'，'tools'）；
td7.setAttribute（'class'，'amount'）；
td8.setAttribute（'class'，'tools'）；
i、 setAttribute（'class'，'delete fa-trash-o'）；
i2.setAttribute（'class'，'delete fa-trash-o'）；
sign=document.createTextNode（$）；
td3.儿童（签名）；
sign=document.createTextNode（$）；
td7.儿童（签名）；
借项：儿童（td）；
借方。追加子项（td2）；
借方。追加子项（td3）；
借方。追加子项（td4）；
td.appendChild（debitDescriptionText）；
td3.appendChild（debitMoneyText）；
td5.appendChild（CreditDescriptionContext）；
td7.追加子项（creditMoneyText）；
td4.儿童（一）；
信用证.儿童（td5）；
贷记：儿童（td6）；
贷记：儿童（td7）；
儿童信贷（td8）；
td8.儿童（i2）；
`var debitTotal = 0.0, creditTotal = 0.0;`

var money = document.querySelector('input[type="number"]').value;
money = parseFloat(money);
debitTotal += money;

document.querySelector('.right > .total.debits').innerHTML = '$' + debitTotal.toFixed(2);

document.querySelector('form').addEventListener('submit', function(evt) {

  var transactions = document.querySelector('tbody');
  var debit, credit, moneyText, descriptionText,
    error, td, td2, td3, td4, td5, td6, td7, td8, i, i2;

  description = document.querySelector('input[type="text"]').value;
      money = document.querySelector('input[type="number"]').value;
      money = parseFloat(money).toFixed(2);


  if (document.getElementsByTagName('select')[0].selectedIndex == 0) {
    alert("Please select a payment option");
    document.getElementsByTagName('select')[0].focus();
  }
  if (document.querySelector('input[type="text"]').value == "") {
    alert("Please enter a description");
    document.querySelector('input[type="text"]').focus();
  }

  if (document.querySelector('input[type="number"]').value < 0 || document.querySelector('input[type="number"]').value == "") {
    alert("Please enter a number over 0");
    document.querySelector('input[type="number"]').focus();
  }

  debit = document.createElement('tr');
  credit = document.createElement('tr');
  debitDescriptionText = document.createTextNode(description);
  debitMoneyText = document.createTextNode(money);
  creditDescriptionText = document.createTextNode(description);
  creditMoneyText = document.createTextNode(money);

  td = document.createElement('td');
  td2 = document.createElement('td');
  td3 = document.createElement('td');
  td4 = document.createElement('td');

  td5 = document.createElement('td');
  td6 = document.createElement('td');
  td7 = document.createElement('td');
  td8 = document.createElement('td');

  i = document.createElement('i');
  i2 = document.createElement('i');

  debit.setAttribute('class', 'debit');
  credit.setAttribute('class', 'credit');
  td3.setAttribute('class', 'amount');
  td4.setAttribute('class', 'tools');
  td7.setAttribute('class', 'amount');
  td8.setAttribute('class', 'tools');

  i.setAttribute('class', 'delete fa fa-trash-o');
  i2.setAttribute('class', 'delete fa fa-trash-o');

  sign = document.createTextNode("$");
  td3.appendChild(sign);

  sign = document.createTextNode("$");
  td7.appendChild(sign);

  debit.appendChild(td);
  debit.appendChild(td2);
  debit.appendChild(td3);
  debit.appendChild(td4);
  td.appendChild(debitDescriptionText);
  td3.appendChild(debitMoneyText);
  td5.appendChild(creditDescriptionText);
  td7.appendChild(creditMoneyText);

  td4.appendChild(i);
  credit.appendChild(td5);
  credit.appendChild(td6);
  credit.appendChild(td7);
  credit.appendChild(td8);
  td8.appendChild(i2);


  if (document.getElementsByTagName('select')[0].selectedIndex == 1) {
    transactions.appendChild(debit);
    text = document.createTextNode("debit");
    td2.appendChild(text);

    var money = document.querySelector('input[type="number"]').value;


    document.querySelector('.right > .total.debits').innerHTML ="$"+(parseInt(document.querySelector('.right > .total.debits').innerText.replace("$",""))+parseFloat(money)).toFixed(2);

    evt.target.reset();
  }

  if (document.getElementsByTagName('select')[0].selectedIndex == 2) {
    transactions.appendChild(credit);
    text = document.createTextNode("credit");
    td6.appendChild(text);

    var money = document.querySelector('input[type="number"]').value;


    document.querySelector('.right > .total.credits').innerHTML ="$"+(parseInt(document.querySelector('.right > .total.credits').innerText.replace("$",""))+parseFloat(money)).toFixed(2);


    evt.target.reset();
  }

  evt.preventDefault();

});

document.querySelector('.transactions').addEventListener('click', function(evt) {
  // check for click on an arrow
  var target = evt.target.parentNode;
  var trash = target.parentNode;

  if (evt.target.classList.contains('delete')) {
    trash.remove(target);
  }
});