计算先前在字段中输入的所有数字的总和

Calculate total sum of all the numbers previously entered in a field

我想计算用户输入的数字总数。用户添加项目名称和金额后,我想显示总数。我怎样才能做到这一点?我只需要显示总数。

例如 商品名称:10 项目名称:5 总计 = 15

http://jsfiddle.net/81t6auhd/


<body>

<header>
    <h1>Exercise 5-2</h1>
</header>


    <p>Item: <input type="text" id="item" size="30">
    <p>Amount: <input type="text" id="amount" size="30">
    <p><span id="message">*</span>
    <p><input type="button" id="addbutton" value="Add Item" onClick="processInfo();">



<script>
var $ = function(id) {
    return document.getElementById(id);
};

var myTransaction = [];
                              
function processInfo ()
{    
     var myItem = $('item').value;
     var myAmount = parseFloat($('amount').value);
     var myTotal = myItem + ":" + myAmount;
     var myParagraph = $('message');  
     

     myParagraph.innerHTML = "";
     myTransaction.push(myTotal);
     myParagraph.innerHTML += myTransaction.join("<br>"); 
        
};

(function () {
    $("addbutton").onclick = processInfo;
    
})();
</script>
</body>

您必须将先前的值存储在内存中的某个位置,以便能够在下一次迭代中重用它

一个建议可以是将其存储在字段的数据集中

     if ($('amount').dataset.previous) {
      myAmount += parseFloat($('amount').dataset.previous);
     }
     $('amount').dataset.previous = myAmount

var $ = function(id) {
    return document.getElementById(id);
};

var myTransaction = [];
                              
function processInfo ()
{    
     var myItem = $('item').value;
     var myAmount = parseFloat($('amount').value);
     if ($('amount').dataset.previous) {
      myAmount += parseFloat($('amount').dataset.previous);
     }
     $('amount').dataset.previous = myAmount;
     var myTotal = myItem + ":" + myAmount;
     var myParagraph = $('message');  
     

     myParagraph.innerHTML = "";
     myTransaction.push(myTotal);
     myParagraph.innerHTML += myTransaction.join("<br>"); 
        
};

(function () {
    $("addbutton").onclick = processInfo;
})();
<p>Item: <input type="text" id="item" size="30">
<p>Amount: <input type="text" id="amount" size="30">
<p><span id="message">*</span>
<p><input type="button" id="addbutton" value="Add Item" onClick="processInfo();">