How can I add old input value to new input value?

Question

 let currencySymbol = '$'; document.querySelector('.pay').addEventListener('click', (e) => { e.preventDefault(); // Get input cash received field value, set to number let amount = document.querySelector('.received').value; amount *= 1; // Set cashReturn to return value of pay() let cashReturn = pay(amount); let paymentSummary = document.querySelector('.pay-summary'); let div = document.createElement('div'); // If total cash received is greater than cart total thank customer // Else request additional funds if (cashReturn >= 0) { div.innerHTML = ` <p>Cash Received: ${currencySymbol}${amount}</p> <p>Cash Returned: ${currencySymbol}${cashReturn}</p> <p>Thank you;</p> `. } else { // reset cash field for next entry document.querySelector('.received');value = ''. div:innerHTML = ` <p>Cash Received: ${currencySymbol}${amount}</p> <p>Remaining Balance. ${cashReturn}$</p> <p>Please pay additional amount;</p> <hr/> `. } paymentSummary;append(div); }); let totalPaid = 0; function pay(totalPaid) { let cartSum = 50; //using a dummy value for snippet return totalPaid - cartSum; }

 .checkout-container { max-width: 34em; padding: 2em; background: #efefef; }

 <div class="checkout-container"> <h2>Checkout</h2> <div class="checkout"> <div class="cart-total"></div> <form> <label>Enter Cash Received:</label> <input class="received" type="text"> <button class="pay">Submit</button> </form> <h3>Receipt</h3> <div class="pay-summary"></div> </div> </div>

I'm implementing a simple cash register where user enters how much they paid into an input field, and it will subtract it from the total cost of the items. If the number returned is positive, it shows that the customer wil be given back the remaining change. If it's a negative value, the customer needs to add more money into the input field, which should be summed with their previous input.

Right now, the previous value is not being added to the new value:

After I input the remaining $15, there should be 0 remaining balance.

Answer 1

If you mean to type an amount of cash received more than once, you need to keep track of the amount of money received so far.

There are multiple ways to achieve that, here I opted for keeping track of it inside the value of an added input element.

In my demo the function cartTotal() always returns 78.45 as the amount to pay, and to reset the amount of money received so far, you just need to click the reset button so that the corresponding input value will be set back to zero.

 function pay(totalPaid){ let cartSum = cartTotal(); return totalPaid - cartSum; } //Arbitrary number function cartTotal(){ return 78.45; } function resetGame(){ document.getElementById('sofar').value = 0; document.getElementById('received').value = 0; document.getElementById('cashreturn').value = 0; } document.querySelector('.pay').addEventListener('click', (e) => { e.preventDefault(); // Get input cash received field value, set to number const amount = parseFloat( document.getElementById('received').value ); //**Here updates the amount received so far const receivedSoFar = parseFloat( document.getElementById('sofar').value ); document.getElementById('sofar').value = receivedSoFar + amount; // Set cashReturn to return value of pay() const cashReturn = pay(amount + receivedSoFar); document.getElementById('cashreturn').value = cashReturn.toFixed(2); });

 body{ font-family: sans-serif; } input, button{ padding: .2rem; width: 5rem; font-size: 15px; } input[disabled]{ outline: none; border: none; font-size: 20px; } button{ cursor: pointer; }

 <label>Enter cash:</label> <input type="text" id="received"> <button class="pay">PAY</button> <hr> <label>Received so far:</label> <input type="text" id="sofar" readonly disabled value="0"> <br> <label>Cash return:</label> <input type="text" id="cashreturn" readonly disabled value="0"> <br> <button onclick="resetGame();">RESET</button>

Answer 2

Your amount variable only represents the last input. Any previous submitted amounts are lost. To fix this, define amount as a global variable, and add to that what the user has entered.

So change this part:

document.querySelector('.pay').addEventListener('click', (e) => {
  e.preventDefault();

  // Get input cash received field value, set to number
  let amount = document.querySelector('.received').value;
  amount *= 1;

to:

let amount = 0; // <--- define here so to accumulate paid amounts
document.querySelector('.pay').addEventListener('click', (e) => {
  e.preventDefault();

  // Get input cash received field value, set to number
  let paid = document.querySelector('.received').value;
  amount += +paid; // <--- accumulate

Your adapted snippet:

 let currencySymbol = '$'; let amount = 0; // <--- define here so to accumulate paid amounts document.querySelector('.pay').addEventListener('click', (e) => { e.preventDefault(); // Get input cash received field value, set to number let paid = document.querySelector('.received').value; amount += +paid; // <--- accumulate // Set cashReturn to return value of pay() let cashReturn = pay(amount); let paymentSummary = document.querySelector('.pay-summary'); let div = document.createElement('div'); // If total cash received is greater than cart total thank customer // Else request additional funds if (cashReturn >= 0) { div.innerHTML = ` <p>Cash Received: ${currencySymbol}${amount}</p> <p>Cash Returned: ${currencySymbol}${cashReturn}</p> <p>Thank you;</p> `. } else { // reset cash field for next entry document.querySelector('.received');value = ''. div:innerHTML = ` <p>Cash Received: ${currencySymbol}${amount}</p> <p>Remaining Balance. ${cashReturn}$</p> <p>Please pay additional amount;</p> <hr/> `. } paymentSummary;append(div); }); let totalPaid = 0; function pay(totalPaid) { let cartSum = 50; //using a dummy value for snippet return totalPaid - cartSum; }

 .checkout-container { max-width: 34em; padding: 2em; background: #efefef; }

 <div class="checkout-container"> <h2>Checkout</h2> <div class="checkout"> <div class="cart-total"></div> <form> <label>Enter Cash Received:</label> <input class="received" type="text"> <button class="pay">Submit</button> </form> <h3>Receipt</h3> <div class="pay-summary"></div> </div> </div>