从函数内部更改全局变量，或实现相同的最佳实践

Question

I am trying to change the variable called projectCounter in a JQuery project so that I don't have to repeat buttons inside each div for each project. How can I make the change in one function accessible to all functions? This is what I have so far:

var projectCounter = 1;

$('a').click(function() {
  function setValue() {
    var projectCounter = projectCounter + 1;
    alert(window.projectCounter);
  }
});

I have made a JSfiddle also: http://jsfiddle.net/cPFRD/

Answer 1

Leave the first var and remove the one inside the function

var projectCounter = 1;
$('a').click(function() {
  function setValue() {
    projectCounter = projectCounter + 1;
    alert(window.projectCounter);
  }
});

Your setValue() function never runs in the code you posted. It will only be defined after a click (so it's not available before) and only after that click can you call/run it. Is that what you want? If you want the projectCounter variable to add on click, remove the whole function setValue() leaving only its content.

when you run setValue() projectCounter will be 2, in this example. You can also use just projectCounter++; to achieve same as projectCounter = projectCounter + 1;

Answer 2

The following code will work even if div>a's are added after the javascript has been run.

> Example Fiddle <

JavaScript

var counter = 0;

$('.container').on('click', 'div a', function () {
  counter++;
  alert(counter);
});

HTML

<div class="container">
  <div>
    <a>Increase Counter</a>
  </div>
</div>

Answer 3

var projectCounter = 1;

$('a').click(function() {
  setValue();//this actually calls the function and thus makes it happen
});

//defining/declaring a function, doesn't actually do anything until it is called
 function setValue() {
    projectCounter = projectCounter + 1;//no var keyword because we want to reference the existing variable, not declare a new one
    alert(window.projectCounter);
  }

This should address the problems with why your code is not working. I don't make any claims that this is best practice though.

Answer 4

   var projectCounter = 1;

   function setValue() {
     projectCounter +=  1;
     alert(window.projectCounter);
   }   

   $('a').click(function(e) {
      e.preventDefault();
      setValue();
   });

I think this is what you were trying to accomplish. now you can add other events to call setValue() . i must say that you should be more specific with what a tag you're referrring to.

Answer 5

Your counter is in global scope, hence visible everywhere:

var projectCounter = 1;

$('a').click(function() {
  alert(projectCounter++);
});

Answer 6

var projectCounter = 1;

$('a').click(function() {
  function setValue() {
    projectCounter = projectCounter + 1;
    alert(window.projectCounter);
  }
});

You need to remove the var from inside the set value function. You should also move this function outside the .click event so you can use it in other locations if required.

Answer 7

When you declare var inside a function, you are explicitly giving it a local scope. If you leave off var when using a variable, it is always considered to be global. So, in your case, you are using var inside the function, which gives it a local scope to that function.

Lastly, you aren't actually calling setValue() anywhere. So that function isn't actually executing. Did you instead mean this?

var projectCounter = 1;

$('a').click(function() {
    projectCounter = projectCounter + 1;
    alert(window.projectCounter);
});