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.

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