0

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

Improve this question
1
  • 2
    why don't you want to use a global? Commented Jun 18, 2015 at 17:55

8 Answers 8

Reset to default
2

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 }
Improve this answer
Sign up to request clarification or add additional context in comments.

9 Comments

What if I end up calling foo multiple times?
@NorCalKnockOut Then what a do you want buttonClicked to act on, assuming each time you call foo you pass in a different value for a?
Sorry for my confusion, but I don't understand the question. a is different everytime foo is called.
@NorCalKnockOut So you're saying you want foo to do some work, then wait for a button click, then continue executing?
Yeah exactly. So foo get an id, queries a database for some objects, checks there status, and updates a table. When the table gets updated, the button is shown to save a.
|
1

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 (i.e. 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.

Improve this answer

Comments

0

This is the reason for a global, either that or create an object with functions that could use closure.

Improve this answer

1 Comment

why the downvote? somebody care to explain? If he does not want to pollute the global namespace than an object would work just fine.
0

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);
Improve this answer

1 Comment

I'm trying to find a way to restructure. I want to run foo until a certain spot, then wait for a button click to continue.
0

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

Improve this answer

Comments

0

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/

Improve this answer

2 Comments

Does the event listener get added everytime I call foo?
In this case, it would. My example is the very simplest implementation.
0

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]

Improve this answer

1 Comment

Using localStorage just to solve a scoping issue seems overkill. At least use sessionStorage, which will be cleared when the browser closes.
0

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

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.