How do I access this variable without a global?

Question

I'm trying to figure out how to make this work.

function foo(a) {
  $('#this-button').show();
}

function buttonClicked() {
  //get access to var a
}

HTML

<button id="this-button" onclick="buttonClicked();">

This is a simplified version of what I have but the idea is the same.

foo takes a variable, and then makes a button visible. When the button is clicked, I want to do more things with var a.

So like wait until the button is clicked to continue the function?

Can't seem to figure it out.

Thanks

Answer 1

Bind the click handler using jQuery. You can use jQuery.Proxy to bind a as an argument:

function foo(a) {
    $('#this-button').show().click( $.proxy( buttonClicked, null, a ) );
}

function buttonClicked(a) {
    // Use a here
}

and remove the JavaScript from your html attribute:

<button id="this-button" />

EDIT, if all you want to do is execute some code after the button is clicked, you can do something like this:

function foo(a) {

    // Code up here executes before the button is clicked

    $('#this-button').show().unbind( 'click.foo' ).one( 'click.foo', function ( ) {
        console.log( a );
        // This code executes after the click, and has access to a
    } );

    // Code down here executes before the button is clicked

}

Answer 2

You use an event handler content attribute . Those have access to:

• Properties defined in the element (if any)
• Properties defined in the form owner of the element 8if any)
• Properties defined in the document
• Properties in the global object (ie global variables).

Therefore, you can add the variable as a property of the element:

 function foo(a) { $('#this-button').show().prop('myProp', a); } function buttonClicked(a) { alert(a); } foo(123); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id="this-button" onclick="buttonClicked(myProp)">Click me</button> 

Of course, using an event handler IDL attribute or an event listener would be a better practice.

Answer 3

这就是创建全局对象的原因，或者创建具有可能使用闭包的函数的对象。

Answer 4

You can always access the global scope:

window.a = a;

But this is generally bad practice. Can you restructure the code so that both places have a available.

Ie

var a = {};  //set a

$("#button").click(function(){
    // a is available here
});

foo(a);

Answer 5

HTML

<button id="this-button"> 

JS

   function foo(a) {
      $('#this-button').show();

      $('#this-button').click(buttonClicked);

    function buttonClicked() {
      //a can be accesed here
    }

    }

Put buttonClicked method inside foo to get access of variable a

Answer 6

There's a few different ways to skin this cat but one method is to use a closure to capture the a variable:

var myButton = document.getElementById('this-button');

function foo(a) {
    myButton.addEventListener("click", buttonClicked(a));
    ...
}

function buttonClicked(a) {
    return function() {
        console.log('buttonClicked', a);
    }
}

foo('Success!');

In this case, the function buttonClicked returns a function that captures the value of a when run by the foo function. This resulting function is then passed to the event handler and run when triggered.

See the fiddle here: https://jsfiddle.net/ToddT/ae5h1src/

Answer 7

You could use HTML5 localstorage ...

function foo(a) {
  $('#this-button').show();
  localStorage.setItem("variable_a", a); // variable in localstorage =variable_a
}

function buttonClicked() {
  localStorage.getItem('variable_a');
  //get access to var a
}

HTML5 localstorage allows you to store data on the client browser, and you can access it via getItem() ... more info here: [ w3schools ], [ jenkov.com ]

Answer 8

Use closure.

  (function(){ var dummy_a; function foo(a) { //$('#this-button').show(); dummy_a = a; } function buttonClicked() { //get access to var a alert(dummy_a) } foo(2) buttonClicked() })();