I have something like var num = 10; and I'm trying to get the sum of this number added to itself on a click function.

So it will be 10; then on click: 20; and on another click: 30; and 40; etc...

Using ++ gives me 11, 12, ... and adding the var to itself is 10, 20, 40, 80,...

I have something like var num = 10; and I'm trying to get the sum of this number added to itself on a click function.

So it will be 10; then on click: 20; and on another click: 30; and 40; etc...

Using ++ gives me 11, 12, ... and adding the var to itself is 10, 20, 40, 80,...

• javascript

4 Answers 4

If you add the variable to itself without storing its original value somewhere, you can't keep adding that value because it has been forgotten.

let x = 10;
let originalX = x;
x += originalX; // 20
x += originalX; // 30
x += originalX; // 40

You're looking for the addition assignment operator aka +=:

var display = document.querySelector('#txtDisplay');
var btn = document.querySelector('#btnIncrement');

let i = 10;
display.setAttribute('value', i);

//calling will increase the value of i by whatever is passed to the outer most function (in this case, the original value of i)
const increment = (function(amount) {
  return function() {
    i += amount;
  }
}(i));

btn.addEventListener('click', () => {
  increment();
  display.setAttribute('value', i);
});

<label>Current value:
  <input id="txtDisplay" type="text" readonly="readonly"/>
</label>
<input id="btnIncrement" type="button" value="Increment" />

You need to use Addition Assignment operator +=

var num = 10,
 org_num = num;
document.getElementById('inc').addEventListener('click', function() {
 num += org_num;
 console.log(num);
});

<button id="inc">Increment</button>

Use Closures.

var increment = (() => {
 var firstValue, currentValue;
 firstValue = currentValue = parseInt(document.getElementById('myValue').innerHTML);
 return function(ev) {
    currentValue += firstValue;
    document.getElementById('myValue').innerHTML = currentValue;
 }
})();

<button onclick="increment()">Add my first value.</button>
<p id='myValue'>10</p>