Passing data in JavaScript

Question

Having a problem understanding what I will call a variable scope question for lack of a better description.

Say I have a page with two functions, one() and two(). The first function has a locally-scoped variable x with an object in it. This function builds an element, below, in the DOM and this element contains an onClick, which calls the second function, and needs to pass x to the second function as an argument. I.e. the second function needs access to the data that is scoped to the first function.

I have tried:

<something onClick="two(x);">

but this doesn't seem to work. I know that there is a way to make x global but I have found in my other languages that globally-scoped variables are discouraged as being dangerous.

• jbabey: show me the coooooooode!
• Brian Hoover: It would help if you posted some code, we could make suggestions. You can put var x = 'something' straight into a <script> tag before the functions are defined. That will make it global, but this is not a great idea if you don't have to do it.

Answer 1

How about using closure:

function one()
{
 var x = Math.random();
 var el = document.createElement('div');
 el.innerHTML='Hi!';
 el.addEventListener("click", function(){two(x)}, false); 
 document.getElementById('myDiv').appendChild(el); 
}
function two(text)
{
 alert(text);
}
one();

Demo

• bethesdaboys: This did indeed work. This was the kind of pattern I was looking for. I was a little surprised that more people did not have a standard response for this, as I would think this would be a very common requirement in JavaScript. This leads me to believe that a lot of people are using globally-scoped variables where they don't have to worry about such things.

Answer 2

Using a global variable within a function is not necessarily bad, but it is considered bad practice to place variables in the window scope, which is assumed if you don’t wrap your variables inside a function or object.

Consider this example:

(function() {
 var x = 1;
 function callback() {
 alert(x);
 }
 function bind() {
 x++;
 elem.onclick = callback;
 }
}());

Answer 3

You should read up on variable scope.

The function closure of one() has access to x. But since it exists in one() and not outside other functions will not have access to it. So you are putting two(x); in your onClick, which will try to resolve the x to a global scope. And there is no global x

You can easily fix this by making x global. Just place var x beside your functions.

Answer 4

to make x global declare it outside of the method

var x = 0
function one()
x=1
function two()
print x

x will print 1

• someone: You're missing some curly brackets ({} and semicolons (;). Also, there's no print function in javascript (except involving a physical printer). Finally, the OP knows that there is a way to make x global but doesn't want to do that, for good reason.
• owen gerig: this was more pseudo than anything, and he wanted to know how to interchange data between methods, this would work, i might not get points but the knowledge is there