increment a variable with javascript

Question

I have made this script, but there is a problem.

When i click addbutton the variable on console log recieve the update (1, 2 ,3 ,4) for every click.

But var fieldHTML remains 1 forever, why?

var a = 1;

$(addButton).click(function(){ //Once add button is clicked

a++;

console.log(a);


});

var fieldHTML = a;

Because `a` is pointing to a new value, but `fieldHTML` is still pointing to old one. — gurvinder372, Apr 29 '16 at 10:02
[_It's always pass by value(even when that value is a reference...)_](http://stackoverflow.com/questions/518000/is-javascript-a-pass-by-reference-or-pass-by-value-language) — Rayon, Apr 29 '16 at 10:05
Objects and arrays are still pass by value, the difference is that the value you have in the first place is a reference. — Quentin, Apr 29 '16 at 10:07

score 4 · Accepted Answer · answered Apr 29 '16 at 10:03

4

Because var fieldHTML = a; copies the value of a to fieldHTML.

It doesn't create a reference.

Changing the value of a (after you've set the value of fieldHTML) won't change the value of fieldHTML.

answered Apr 29 '16 at 10:03

Quentin

914,110
126
1,211
1,335

I did not understand, you could do a little example? – Maurizio Benini Apr 29 '16 at 10:05
@MaurizioBenini — An example of what? I'm just describing what the example you provided does. – Quentin Apr 29 '16 at 10:06
there is a way to update fieldHTML with the increment value? – Maurizio Benini Apr 29 '16 at 10:09
Only by updating it explicitly. – Quentin Apr 29 '16 at 10:09

score 0 · Answer 2 · answered Apr 29 '16 at 10:29

You need to apply an id or class to the selector, wrap it into document ready, and also pass the new value of "a" to a function that can then manipulate the fieldHTML value. Check out the snippet note that I used alerts to demonstrate the increasing count rather thanconsole.log - simply because its in the snippet.

$(document).ready(function(){
     var a = 1;
      $('#addButton').click(function(){ //Once add button is clicked
       a++;
       alert("a = " + a);
       update_fieldHTML(a);
      });
  })

function update_fieldHTML(value){
var fieldHTML = value;
  alert("fieldHTML =" + fieldHTML);
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="addButton">Click Me</button>

Robert · Answer 3 · 2016-04-29T10:30:18.167

var addButton = $("#btn");
var viewButton = $("#btn-2");
var setButton = $("#btn-3");
var a = 1;
var fieldHTML = a; // on load, addign a value to fieldHTML variable  |  fieldHTML = 1

$(addButton).click(function() { //Inc by 1
  a++;
  console.log('a : '+a);
});

$(viewButton).click(function() {  //Show fieldHTML value in console
  console.log('fieldHTML : '+fieldHTML);
});

$(setButton).click(function() { // reassign a value to the fieldHTML variable  | on click event
  fieldHTML = a;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id='btn'>Inc a</button>
<button id='btn-3'>Set fieldHTML</button>
<button id='btn-2'>View fieldHTML</button>

The way you wrote it, this code `var fieldHTML = a;` was executed on the window load event. After you increment `a` value you have to **reassign** its value to `fieldHTML` somehow. — Robert, Apr 29 '16 at 10:34

score -1 · Answer 4 · answered Apr 29 '16 at 10:41

var addButton = $("#btn");
var viewButton = $("#btn-2");
var a = 1;
var fieldHTML = a;

$(addButton).click(function() { 
  fieldHTML = increment();
  alert('a : ' + a);
});

$(viewButton).click(function() {
  alert('fieldHTML : '+fieldHTML);
});

function increment(){
   return ++a;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id='btn'>Inc a</button>
<button id='btn-2'>View fieldHTML</button>

increment a variable with javascript

4 Answers4