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

i want to calculate the total of the numbers entered by the user. After a user has added item name and the amount, i want to display the total. How can i do this? i just need to display the total.

For example item name : 10 item name : 5 total = 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>

CodePudding user response：

you have to stored the previous value somewhere in memory to be able to reuse it at next iteration

one proposal can be to stored it in dataset of the field

     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();">