how to keep adding to JS variable?

Question

I am trying to continuously add to a js variable every time a user enters a value into a box.

So far if they enter '21' the alert will say 'your balance is £12' but then if I enter '15' I want it to say your balance is '27' but instead it says '15' or rather just the latest amount.

The code below:

<form action="" method="get">
  <input type="number" value="" id="amountDropped">
  <input type="submit" value="Deposit amount" onclick="depositedFunds()">
</form>

var firstAmount = 0;    
function depositedFunds(){

    var ad = document.getElementById("amountDropped");

    firstAmount = +firstAmount + +ad.value;
    alert ("Your balance is £" + firstAmount);
};

thanks

firstAmount += ad.value;

GillesC
– GillesC

2015-09-17 11:55:42 +00:00
Commented Sep 17, 2015 at 11:55 — GillesC
– GillesC, Commented Sep 17, 2015 at 11:55

Quentin · Accepted Answer · 2015-09-17 11:57:52Z

4

The function which makes the change is attached to a submit button.

When the user clicks the button:

The JS runs
The value is updated
The value is alerted
The form is submitted
A new page loads
The new page has var firstAmount = 0; in it

You should:

Set the default value dynamically with server side code. See Unobtrusive JavaScript and
Prevent the default behaviour of the submit button

Using an onclick attribute, you need to return false from the event handler function:

onclick="depositedFunds(); return false;"

Modern code would separate concerns and not tie things so tightly to a specific means of triggering the form submission.

var firstAmount = 0;

function depositedFunds(e) {
  e.preventDefault();
  var ad = document.getElementById("amountDropped");
  firstAmount = +firstAmount + +ad.value;
  alert("Your balance is £" + firstAmount);
};

document.querySelector('form').addEventListener('submit', depositedFunds);

<form method="get">
  <input type="number" id="amountDropped">
  <input type="submit" value="Deposit amount">
</form>

answered Sep 17, 2015 at 11:57

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Obese Octopus Over a year ago

very helpful thanks. just wondering how would you keep the variable in session? your method works but if i close the browser/log out etc it will reset it to 0...

Quentin Over a year ago

I wouldn't keep it in a session. If I needed to preserve it between sessions then I'd store it in a database on the server and associate it with a session on demand using auth/authz.

Collectives™ on Stack Overflow

how to keep adding to JS variable?

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related