如何從Javascript的輸入值中獲得總金額？

我對Javascript很陌生，並且使用DOM。我正在嘗試將用戶的輸入值添加到總數中。每次他們添加信用卡或借記卡時，都會將其添加到總額中。我所做的每一次嘗試都會導致NaN，未定義或其他錯誤。我需要一個for循環還是有一個更簡單的方法來做到這一點？如何從Javascript的輸入值中獲得總金額？

下面是完整的代碼：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>

來源

2016-04-01 Hibernation

也許檢查：http://stackoverflow.com/questions/16057672/sum-values-from-an-array-in-javascript –

你的金額包括'$'。你是否刪除它？ –

您需要將事件的聲明外總變量。

`var debitTotal = 0.0, creditTotal = 0.0;`

你也在轉換太多次，試圖得到總數是不必要的，你可以添加浮動。從money = parseFloat(money).toFixed(2)中刪除.toFixed(2)。 toFixed(2)將您的值轉換爲字符串。另外刪除for loop。所有你需要的是：

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

得到你的總數。然後顯示總可以添加.toFixed(2);

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

我做了基本學分同樣的事情。

這是更新的jsfiddle。

來源

2016-04-01 19:58:58 Anthony

我檢查了你所做的小提琴，並且只要表單字段被正確填充，交易列表似乎不會拋出任何錯誤。

您添加到字段的驗證檢查在解析爲無效後需要返回語句。

問題是，如果沒有輸入數據，該值將被解析爲NaN，並且即使在顯示警報後顯示該警報無效，您也正在爲其添加一行。（由於功能不退出，即使輸入值無效）

來源

2016-04-01 19:29:17

money = parseFloat(money).toFixed(2);

的typeof錢 - >小數點後2個字符數

var total = 0; 

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

金錢成了串，你檢查每一個字符

if (parseInt(money[i].value))

錢[I]（字符串變量）。價值是不確定的，所以 parseInt函數（未定義）= NaN的-means非數字

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

，所以你不要需要循環，只是

total += parseInt(money)

來源

2016-04-01 19:45:25

這應該工作，如果你用這個替換你當前的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); 
    } 
});

來源

2016-04-01 20:14:27

如何從Javascript的輸入值中獲得總金額？

回答

相關問題