Passing parameter to the javascript function fails

Question

function test() {
    var id = 123;
    var id12 = 'abcd';
    var childDiv = "";
    childDiv += '<div style="width:20px;height:20px"  onclick="newsClicked('+id12+')">Click</div>';  

    $("#mydiv").append(childDiv);

}

function newsClicked(param) {
    alert(param);
}

Above is the test function, test() is the function which I call inside onClick event of a test div. If I pass id which is a number(integer) it works, If I pass string it says reference error. Its related to closure I guess. How to solve it. Whats happening actually here ?

Michał Powaga · Accepted Answer · 2011-12-22 11:26:40Z

2

Change:

childDiv += '<div style="width:20px;height:20px" onclick="newsClicked('+id12+')">Click</div>';

to

childDiv += '<div style="width:20px;height:20px" onclick="newsClicked(\''+id12+'\')">Click</div>';

When you append childDiv 1st one to div with integer as parameter the result will be:

<div style="width:20px;height:20px"  onclick="newsClicked(3)">Click</div>

which is correct, in case of string the result will be:

<div style="width:20px;height:20px"  onclick="newsClicked(string_as_arg)">Click</div>

this is not ok, because string_as_arg is not a variable at last not in the scope. That's why you should enclose it in apostrophes. Then the proper results will be:

<div style="width:20px;height:20px"  onclick="newsClicked('3')">Click</div>
<div style="width:20px;height:20px"  onclick="newsClicked('string_as_arg')">Click</div>

so there is no really big difference in case of integer constant but string now is properly recognised as string not as variable.

edited Dec 22, 2011 at 11:26

answered Dec 22, 2011 at 11:11

Michał Powaga

23.4k8 gold badges55 silver badges62 bronze badges

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

2 Comments

sat Over a year ago

Thanks , Got it working, but I did not get what exactly is the problem, To pass as a string parameter, we need to escape it , why ?

Michał Powaga Over a year ago

@sat you are passing this as a string but only to concatenate different statement of code which will be executed later.

dku.rajkumar · Accepted Answer · 2011-12-22 11:20:48Z

1

Its working when you are passing a number because the number need not be in quotes but the string has to be in quotes. so to pass string you should use escape char "\"

something like :

newsClicked(\''+id12+'\')

answered Dec 22, 2011 at 11:20

dku.rajkumar

18.6k8 gold badges43 silver badges58 bronze badges

Comments

Mujah Maskey · Accepted Answer · 2011-12-22 11:38:35Z

1

on you issues,

How to solve it.

*note: you can see like \''+id12+'\' on below code

function test() {
    var id = 123;
    var id12 = 'abcd';
    var childDiv = "";
    childDiv += '<div style="width:20px;height:20px"  onclick="newsClicked(\''+id12+'\')">Click</div>';  

    $("#mydiv").append(childDiv);

}

function newsClicked(param) {
    alert(param);
}

Whats happening actually here ?

newsClicked function will fired after DIV clicked which is recently added to dom, It will added to dom like

<div onclick="newsClicked(abcd)" style="width: 20px; height: 20px;">Click</div>

here, abcd is use like variable, but does not exist on real.

And you will get error like

abcd is not defined

but if you put id variable which is integer, it will add on dom like

<div onclick="newsClicked(123)" style="width: 20px; height:20px;">Click</div>

which is totally correct on syntax wise.

I guess, you clear on this now.

Cheers,

edited Dec 22, 2011 at 11:38

answered Dec 22, 2011 at 11:22

Mujah Maskey

8,8148 gold badges43 silver badges61 bronze badges

1 Comment

sat Over a year ago

ok, so If integer is passed, it takes as value, not as variable, thats why it works! Phew!

Collectives™ on Stack Overflow

Passing parameter to the javascript function fails

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related