Passing dynamic parameter to a JavaScript function using innerHTML

Question

I am having issues passing a dynamic parameter to a JavaScript function using innerHTML.

Included below is the current code that I am using:

var name = "test";

frm.innerHtml = '<button name="close" id="close" title="Cancel" type="button"
     onclick="closeTab('+name+');">Return</button>';

When I debug the code of the closeTab() function, the parameter specified by the name variable is null.

I believe there is a problem with the declaration of the value while modifying the innerHTML property.

Any help would be greatly appreciated.

Thanks

do u mean i simply use the variable name without quotes? Thanks — Coder
– Coder, Commented Jul 4, 2012 at 3:08
You should use DOM like document.createElement and others instead of setting innerHtml because it's cleaner — Alvin Wong
– Alvin Wong, Commented Jul 4, 2012 at 3:23

Robert · Accepted Answer · 2012-07-04 03:17:54Z

6

Your dynamic declaration is passing the parameter as a variable, instead of the value of the parameter. In order to correct this issue, you must pass the value as a string, instead of a variable, which is accomplished by encasing and escaping the variable in single quotes as demonstrated below:

var name = "test";

frm.innerHtml = '<button name="close"  id="close"  title="Cancel" type="button"
      onclick="closeTab(\''+name+'\');">Return</button>';

answered Jul 4, 2012 at 3:17

Robert

8,7672 gold badges29 silver badges34 bronze badges

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

1 Comment

Marek Bernád Over a year ago

I used double quotes which not worked, you showed that single is needed \' ... gj, you helped me

Niet the Dark Absol · Accepted Answer · 2012-07-04 03:09:59Z

5

Your resulting code is:

<button ... onclick="closeTab(test);">Return</button>

Can you see what's wrong? test is being treated as a variable, when you actually intended it to be a string.

I like to use JSON.stringify to make a variable parseable (kind of like var_export in PHP), but in this case you also need to escape quotes. So:

JSON.stringify(test).replace(/"/g,"&quot;")

Use that in your button instead of just test.

answered Jul 4, 2012 at 3:09

Niet the Dark Absol

326k86 gold badges480 silver badges604 bronze badges

1 Comment

Niet the Dark Absol Over a year ago

That only works because name is a global variable, but as soon as you do anything more complicated it will be "inexplicably" broken.

Alvin Wong · Accepted Answer · 2012-07-04 05:35:25Z

0

Using DOM:

var name="test";
var el = document.createElement("button");
el.name = "close";
el.id = "close";
el.title = "Cancel";
el.type = "button";
el.onclick = function() {  // an inline function that will be executed when el is clicked
    closeTab(name);        // `name` here contains `"test"`
};
frm.appendChild(el);

I really don't encourage overusing innerHTML as it is messy, and can sometime be slow.

edited Jul 4, 2012 at 5:35

answered Jul 4, 2012 at 4:55

Alvin Wong

12.5k5 gold badges55 silver badges78 bronze badges

Comments

Arindam Roy · Accepted Answer · 2013-06-12 14:55:40Z

0

Assuming your html is -

<form id='frm'>

</form>

Your JS should be -

var name = "test";
var innerHtml = "<button name='close' id='close' title='Cancel'   type='button'>Return</button>";
$("#frm").html(innerHtml);
$("#close").attr("onclick","javascript:closeTab('"+name+"');");

Check this out - http://jsfiddle.net/arindam006/avgHz/1/

This is the cleanest way to achieve this, though innerHtml is not a proper way to do it as everyone suggested above.

answered Jun 12, 2013 at 14:55

Arindam Roy

1

Comments

Coder · Accepted Answer · 2012-07-04 03:19:56Z

-1

I simply used onclick="closeTab(name);"> in innerHTML and it worked. I guess that worked coz name is global variable.

answered Jul 4, 2012 at 3:19

Coder

3,1408 gold badges53 silver badges86 bronze badges

1 Comment

Robert Over a year ago

The usage of name in this context passes it to the closeTab() function as a variable, not a string. Ideally, function execution in this context should receive the string, not a global variable.

Collectives™ on Stack Overflow

Passing dynamic parameter to a JavaScript function using innerHTML

5 Answers 5

1 Comment

1 Comment

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

1 Comment

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related