Pass Javascript Variable to Another Function via Onclick

Question

JavaScript novice here....I need to call a JavaScript function that is passed two variables. I then need those 2 variables to be passed to another function via an onClick event. Here is the general idea:

function FirstFunction(var1, var2) {
    // Using console.log to verify passed variables
    console.log(uid);
    console.log(accessToken); 
    $('#dialog-message').html('<div><button onclick="SecondFunction(var1, var2)">Submit</button></div>');
};

function SecondFunction(var1, var2) {
    // Using console.log to verify passed variables
    console.log(uid);
    console.log(accessToken); 
};

I am unable to see var1 & var2 in SecondFunction(). What's wrong here?

The inline click event handler will be evaluated in global scope, not inside the function scope. It look like you are using jQuery, so use it to create the DOM elements and bind the event handler. learn.jquery.com/using-jquery-core/manipulating-elements, learn.jquery.com/events/event-basics — Felix Kling
– Felix Kling, Commented Feb 5, 2014 at 18:48
Thanks @FelixKling. I am not well versed in jQuery so I am not certain how to do as you suggested - I did however solve part of my issue by declaring var1 & var2 as global variables and I can at least now see them in the SecondFunction call. This is part of a Facebook JavaScript SDK issue - Which I've posted in a separate question if you think you can help. (stackoverflow.com/questions/21608444/…) - Thanks again. — Tom
– Tom, Commented Feb 6, 2014 at 16:27
That's why I added the links ;) But anyways, I added an answer, I hope it helps! — Felix Kling
– Felix Kling, Commented Feb 6, 2014 at 16:45

Felix Kling · Accepted Answer · 2014-02-06 16:42:44Z

1

My original comment:

The inline click event handler will be evaluated in global scope, not inside the function scope. It look like you are using jQuery, so use it to create the DOM elements and bind the event handler.

This way, you can avoid the whole problem (and don't have to use global variables):

function FirstFunction(var1, var2) {
    var $button = $('<button />', {
        click: function() {
            SecondFunction(var1, var2);
        },
        text: 'Submit'
    });

    $('<div />').append($button).appendTo('#dialog-message');
}

Because now the event handler is a closure with access to var1 and var2.

answered Feb 6, 2014 at 16:42

Felix Kling

820k181 gold badges1.1k silver badges1.2k bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Tom Over a year ago

Thanks again @FelixKling!! This is what I needed to give me a jump start. I did use the links you provided but it was pretty much Greek to me without a relevant example. jQuery is new language for me but your answer helped greatly. Now if I could the other issue with that function working now that it gets the variables I'll be all set!

Miller · Accepted Answer · 2014-02-05 18:49:03Z

0

Try this

$('#dialog-message').html('<div><button onclick="SecondFunction('+ var1 + ','+ var2+ ')">Submit</button></div>');

answered Feb 5, 2014 at 18:49

Miller

1,15610 silver badges23 bronze badges

1 Comment

Felix Kling Over a year ago

Why should the OP try this? Explain your answer, and don't forget to mention that does only works if var1 and var2 are numbers, booleans or regular expressions..

Raghunandan Krishnamurthy · Accepted Answer · 2014-02-05 18:49:47Z

0

Try

$('#dialog-message').html('<div><button onclick="SecondFunction(' + var1 +', ' + var2  + ' )>Submit</button></div>');

answered Feb 5, 2014 at 18:49

Raghunandan Krishnamurthy

6955 silver badges11 bronze badges

1 Comment

Felix Kling Over a year ago

Why should the OP try this? Explain your answer, and don't forget to mention that does only works if var1 and var2 are numbers, booleans or regular expressions.

Collectives™ on Stack Overflow

Pass Javascript Variable to Another Function via Onclick

3 Answers 3

1 Comment

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related