0

I encountered a strange problem today.

The good: I successfully changed a global var value from within a function(in other words the below example works fine when "passedVarName" is substituted with "a").

The bad: When trying to pass the global var name "a" (rather than putting it directly in the function) it fails to work.

Below is what I can't seem to get working:

(on click document should write "2" but instead writes "NaN" ?)

Javascript:

  var a = 1;

  function click(passedVarName){

     passedVarName ++;

     document.write(passedVarName)

  };

HTML:

<a href="javascript:click('a')">Click this Button to alter global var "a".</a>
1
  • apologies the HTML should read :<a href="javascript:click('a')">Click this Button to alter global var "a".</a>. Apr 20, 2012 at 5:37

4 Answers 4

2

This is a pretty bad Code Smell, but if you know it's global, then this'll work:

var a = 1;

function click(passedVarName){

    window[passedVarName]++;

    document.write(passedVarName)

};
3
  • thanks that did the trick! If you don't mind what makes it smell bad? :) I'd very much appreciate a cleaner alternative. Apr 20, 2012 at 5:52
  • @user1345660 Bad code smell in this case I believe refers to the explicit reference to the window-object, instead of using the reference to a variable passed in as a parameter. @DhruvPathat already pointed out the error in your code, and gave you a working example.
    – nikc.org
    Apr 20, 2012 at 7:41
  • Yes, however in his example he is only changing a value passed to the function, not the variable itself. The actual global variable unfortunately remains at 1. This is why window[passedVarName] seems to be neccessary. Apr 20, 2012 at 16:59
1

Click this Button to alter global var "a".

This passes string 'a' to your function, not the variable a. You need to pass it as click(a);

Corrected example : http://html-bin.appspot.com/aghodG1sLWJpbnIMCxIEUGFnZRjhjxoM

[ Did not use jsfiddle.net to avoid confusion by seperating javascript and HTML ]

1
  • Exactly, and NaN means 'Not a Number' (you can't increment a string...) Apr 20, 2012 at 5:45
0

Passing a global variable as a param to a function creates a copy of that var inside the function. The global doesn't change.

This example will generate the same output everytime you click on the first div:

//html
<div onclick="foo(a)">Click here</div>
<div id="txt"></div>​​​​​​​​​​​​​
//js
window.a = 152;
window.foo = function(varr) {varr++; $("#txt").html(varr)}​

However, it seems like if you pass your variable as a property of an object, pass that object to the function, and inside your function modify the variable, it has global effect :

//html
<div onclick="foo(a)">Click here</div>
<div id="txt"></div>​​​​​​​​​​​​​​​​
//js
window.a = { val:152};
window.foo = function(varr) {varr.val++; $("#txt").html(varr.val)}​

Here is a jsFiddle that works: http://jsfiddle.net/2Ahdb/3/

1
  • nice work! this looks like a nice clean alternative to using "window[]" in my functions. thanks! Apr 20, 2012 at 17:21
0

Forgive me if I misinterpret your knowledge of programming, but a global variable is something that can be accessed and modified by any part of your programming, you do not need to pass it through a function to modify it.

IF you are trying to modify global variables through a function, javascript has some limitations. Only objects are passed by reference.

var a = 5;
var b = { value: 5 };


function changeMe(x) {
   x = 10;
}
changeMe(a); //... still 5

function changeMeAlso(x) {
   x.value = 10;
}
changeMeAlso(b); //.. changed to { value: 10 }

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.