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.

It would help if you posted some code, we could make suggestions. You can put var x = 'something' straight into a — Brian Hoover, Sep 29 '11 at 20:14

someone · Accepted Answer · 2011-09-29T20:30:12.560

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

edited Sep 29 '11 at 20:30

answered Sep 29 '11 at 20:18

someone

1,468
8
9

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. – bethesdaboys Sep 30 '11 at 12:22

score 1 · Answer 2 · answered Sep 29 '11 at 20:19

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;
  }
}());

score 0 · Answer 3 · edited May 23 '17 at 09:59

0

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.

edited May 23 '17 at 09:59

Community

1
1

answered Sep 29 '11 at 20:19

Marshall

4,716
1
19
14

score 0 · Answer 4 · answered Sep 29 '11 at 20:20

0

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

answered Sep 29 '11 at 20:20

owen gerig

6,165
6
52
91

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. – someone Sep 29 '11 at 20:28
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 – owen gerig Sep 30 '11 at 13:23

Passing data in JavaScript

4 Answers4