variable in onclick function of dynamically created button

Question

Hy,

Basically, I have a number of dynamically generated list items with a button in them. When I prepend the list item to the ul list, I have access to a variable that I want to pass when I click the button in the list items. But when I add the variable in the line of code shown below, it gives me a Uncaught ReferenceError: challenger is not defined error. How can I pass these variable along?

JAVASCRIPT:

window.GLOBAL_socket.on('challenged', function(data) {
    console.log("You have been challenged by the player " + data.challenger);
    var challenged = getUrlVars()['user'];
    var challenger = data.challenger;
    $("#challengesList").prepend("<li><div id='newChallenge'><p id='challenge_header'>You have been challenged by: </p><p id='challenge_challenger'>" + data.challenger + 
        "</p><input type='button' value='ACCEPT' id='challenge_accept' onclick='acceptChallenge(challenger)'></input><input type='button' value='DECLINE' " + 
        "id='challenge_decline' onclick='declineChallenge(this)'></div></li>");
});

The onclick method is found on line 6.

Thanks for your responses,

Zeno

Bryant Miano · Accepted Answer · 2015-03-24 20:08:36Z

3

The reason why challenger is not defined is because it's a local variable and is not accessible globally when you actually trigger the function with a click.

So instead of using the variable, just place it's actual value in the onclick.

Change your code to:

$("#challengesList").prepend("<li><div id='newChallenge'><p id='challenge_header'>You have been challenged by: </p><p id='challenge_challenger'>" + data.challenger + 
        "</p><input type='button' value='ACCEPT' id='challenge_accept' onclick='acceptChallenge(\""+challenger+"\")'></input><input type='button' value='DECLINE' " + 
        "id='challenge_decline' onclick='declineChallenge(this)'></div></li>");

edited Mar 24, 2015 at 20:08

answered Mar 24, 2015 at 19:38

Bryant Miano

6893 silver badges9 bronze badges

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

9 Comments

Rory McCrossan Over a year ago

Some description of what the problem is, what you've changed and why it helps solve the problem would help a lot here.

wheelbarrow Over a year ago

It now gives me the following error: 'Uncaught ReferenceError: admin is not defined', where admin is the value of the challenger value

Bryant Miano Over a year ago

Oops, you want to pass it as a string. I updated my answer (notice the single and double quotes around the variable).

Banana Over a year ago

@zenodhaene it would be easier to locate the issue if you post the contents of the acceptChallenge() function

wheelbarrow Over a year ago

@banana Well, funny enough, the acceptChallenge method is empty. Just the function name and the 1 parameter. It seems like the error is occurring in the piece of code I wrote down in the description.

|

Nouman Arshad · Accepted Answer · 2015-03-24 20:04:53Z

Change your code as I mentioned in comments.

var challenged = [];
var challenger = [];
var counter = 0;

window.GLOBAL_socket.on('challenged', function(data) {
    console.log("You have been challenged by the player " + data.challenger);
    counter++;
    challenged[counter] = getUrlVars()['user'];
    challenger[counter] = data.challenger;

    $("#challengesList").prepend("<li><div id='newChallenge'><p id='challenge_header'>You have been challenged by: </p><p id='challenge_challenger'>" 
        + data.challenger 
        + "</p><input type='button' value='ACCEPT' id='challenge_accept'"

        // change of code --> passing value directly into the function
        + " onclick='acceptChallenge(challenger["+counter+"]

        +")'></input><input type='button' value='DECLINE' " 
        + "id='challenge_decline' onclick='declineChallenge(this)'></div></li>");

});

I just modified code, hope it works for you. Let me know

The is about the answer of the previous answer, It now gives me the following error: 'Uncaught ReferenceError: admin is not defined', where admin is the value of the challenger value

Collectives™ on Stack Overflow

variable in onclick function of dynamically created button

2 Answers 2

9 Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

1 Comment

Related