个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-30 12:02:14 25 4
gpt4 key购买 nike

我对 Javascript 还很陌生，并且使用 DOM。我正在尝试将用户的输入值加到总数中。每次他们为贷方或借方添加一个值时，它都会将其添加到总数中。我所做的每一次尝试都会导致 NaN、undefined 或其他一些错误。我需要 for 循环还是有更简单的方法来执行此操作？

这是完整的代码:JSFiddle

我的 Javascript 片段(用于添加总数):

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;
money = parseFloat(money).toFixed(2);
var total = 0;

for (var i = 0; i < money.length; i++) {
  if (parseInt(money[i].value))
    total += parseInt(money[i].value);
}

document.querySelector('.right > .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>

最佳答案

如果您用它替换当前的 JSFiddle 脚本，这应该可以工作。它采用跨度中的当前值并删除 $ 然后添加到它。然后为了让它看起来不错，它使小数点后的长度固定，并在前面加上一个美元符号。最后将跨度值更新为新的总数。如果您计划能够删除节点，这将需要修改。如果您确实实现了删除，您将读取节点类型和值以及减去而不是添加。

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

关于javascript - 如何使用 Javascript 从输入值中获取总和？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36363773/

25 4 0
文章推荐： Java/Swagger : Generate request example
文章推荐： java - 如何从 arrayList 中删除重复元素但对它们的参数求和？
文章推荐： java - 比使用 If Else 循环更简单的方法来排序哪个字符串更大？
文章推荐： javascript - document.getElementById ("#").innerHTML = "Hello "+ 用户 + "!";不工作
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com