JavaScript：变量的动态值未更新。 为什么会这样呢？

Question

I recently started learning JavaScript and jQuery and I might be stuck on a newbie error. I'm trying to keep my code as easy to read as possible, so I decided to store a chunk of HTML concatenated with a variable inside another variable. The concatenated variable holds a numeric value that gets updated every time I use the variable that holds everything, the html, and the other variable.

Something like this:

var variableA  = 1;
var variableB = "<h4>Header number : "+ variableA +"</h4>";

var addHeader = funtcion(){
  $('#mainDiv').prepend(variableB);
  variableA++;
};

Whenever I call that function later in the code it always prints "Header number 1", what can I make it print the correct/desired values?

Header number 1

Header number 2

Header number 3

Answer 1

After you store variableB for the 1st time it is a string, and updating variableA won't update it. To solve the problem, generate variableB whenever you call the function:

var variableA  = 1;

var addHeader = funtcion(){
  var variableB = "<h4>Header number : "+ variableA +"</h4>";
  $('#mainDiv').prepend(variableB);
  variableA++;
};

Answer 2

If you want it to iterate each time you call it, you could try this:

var headerIndex = 1;
var addHeader = function(){
  $('#mainDiv').prepend("<h4>Header number: " + (headerIndex++) + "</h4>");
};

Example: http://codepen.io/anon/pen/OyJpQq

You might want to use $('#mainDiv').html(...) instead of prepend(...) to get it to update the contents of the div entirely...

Answer 3

The problem is variableB is String. It isn't a reference so use var variableB = "<h4>Header number : "+ variableA +"</h4>"; inside your function to create new string every function invocation

Answer 4

Move your variables inside the function, like so:

var variableA  = 1;
var variableB = "<h4>Header will be replaced</h4>";

$('#mainDiv').html(variableB);  

$('#button').click(function(){ 
    addHeader();
});

function addHeader(){
  variableB = "<h4>Header number : "+ variableA +"</h4>";
  $('#mainDiv').html(variableB);
  variableA++;
}

And the HTML:

<div id="mainDiv"> </div>
<button id="button">clicky</button>

Play around with it here:
http://jsfiddle.net/66rgnd0k/