Access inner function variable outside JavaScript function

Question

I needs to access the variable outside the function,

Example:

var testData = "LoadedVariable";
    function loadFunction(){
        testData = "DynamicVariable";
    }
    alert(testData);

<div onclick="loadFunction();" style="cursor: pointer;">
turn around click
</div>

As per above example, on page load i can access testData as "LoadedVariable". But, when i clicks the button, testData needs to change to "DynamicVariable".

This is for dynamic chat functionality for single web app application.

How to trigger the alert when i clicks button. I know we can alert it inside the function. But i need to achieve the result in above example format.

Thanks in advance.

I added the same in JSFIDDLE

Not quite sure what you are asking. Here's a post on variable scope in javascript: http://stackoverflow.com/questions/500431/what-is-the-scope-of-variables-in-javascript If you still need information and can better describe what you are trying to accomplish it will be easier for someone to provide a solution — Steve Mitcham, Jan 16 '15 at 05:41
do you want to observe the variable for change and alert accordingly? — mido, Jan 16 '15 at 05:42
i am not sure how what you want is different from a normal ```callback``` — mido, Jan 16 '15 at 05:44

Rafael · Answer 1 · 2015-01-16T05:51:15.327

0

Working Example

http://jsfiddle.net/yw6pf87s/1/

function loadFunction() {
  testData = "DynamicVariable";
  return testData;
}

alert(loadFunction());

My Reccommendation

function loadFunction(newValue){
  testData = newValue;
  alert(testData);
}

HTML

<div onclick="loadFunction('New Value');" style="cursor: pointer;">turn around click</div>

edited Jan 16 '15 at 05:51

answered Jan 16 '15 at 05:41

Rafael

7,605
13
31
46

I don't recommend it but it's a direct answer to the question ;( – Rafael Jan 16 '15 at 05:49

machineghost · Accepted Answer · 2015-01-16T17:58:27.153

Your problem isn't one of variable scoping. In fact, if you test your example code:

var testData = "LoadedVariable";
function loadFunction(){
    testData = "DynamicVariable";
}
alert(testData);

you'll see it actually works correctly: it alerts "LoadedVariable".

Your problem is actually a timing one:

<div onclick="loadFunction();" style="cursor: pointer;">

What that is saying is, "run a function which changes my variable" ... but not "run a function which changes my variable AND alerts it". You only have one alert, which occurs when the page loads, so when your div gets clicked and you call loadFunction nothing happens. Behind the scenes your testData variable has become "DynamicVariable", you just can't tell without an alert.

As others have suggested, you could solve this timing problem by moving the alert inside the function.

score 0 · Answer 3 · answered Jan 16 '15 at 06:32

Just use a separate function as click handler. Have the click handler call loadFunction and then alert:

<div id="turnaround" style="cursor: pointer;">
turn around click
</div>

<script>
var testData = "LoadedVariable",
    loadFunction = function () {
        testData = "DynamicVariable";
    },
    clickHandler = function () {
      loadFunction();
      alert(testData);
    },
    turnaround = document.getElementById('turnaround');

turnaround.addEventListener('click', clickHandler, false);
</script>

jsFiddle

Access inner function variable outside JavaScript function

3 Answers3