How can I pass a variable through an onclick event when javascript is creating the html?

Question

My javascript creates a line of html.

That html has an onclick event call to openSingle().

I need to pass a variable into that function.

onclick="openSingle('+findID+')"

When I check the dev panel when it runs, i get

onclick="openSingle(WP0100200-3a)"

The only thing that is missing is the quotes around the id. But if i try to code in the quotes, it breaks the html and then puts everything out of order.

Here is my line of code and all the pertaining variables.

var iconImage = '<img src="../../resources/images/annotation-icon.png" style="float:left; margin-left:20px; margin-right:0px;"onclick="openSingle('+findID+')"/>';
var paragraph = '<p id="Manual-para" class="colorMe"><a href="';
var redirect = linkMe + '#' + findID;
var manName = section.childNodes( x ).getAttribute( "manualName" );
var workPack = section.childNodes( x ).getAttribute( "workPacket" );

document.getElementById( "annotateBody" ).innerHTML += iconImage + paragraph + redirect + '">' + annotationTitle + ' - ' + manName + ' - ' + workPack + '</a></p>';

Instead of writing HTML in javascript you should do .createElement(). Also please don't use inline JS in your HTML. — PeeHaa
– PeeHaa, Commented Nov 27, 2012 at 13:30
If you want quotes around the id, try escaping the single quotes using backslash? — Simon Carlson
– Simon Carlson, Commented Nov 27, 2012 at 13:31

lostsource · Accepted Answer · 2012-11-27 13:30:29Z

3

You can escape quotes with a backslash like so

var iconImage = '<img src="../../resources/images/annotation-icon.png" style="float:left; margin-left:20px; margin-right:0px;"onclick="openSingle(\''+findID+'\')"/>';

and as other comments suggested you should ideally avoid inline Javascript

answered Nov 27, 2012 at 13:30

lostsource

22k9 gold badges71 silver badges90 bronze badges

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

Comments

Nelson Benítez León · Accepted Answer · 2012-11-27 13:31:31Z

0

Escape the single quotes, like this:

var iconImage = '<img src="../../resources/images/annotation-icon.png" style="float:left; margin-left:20px; margin-right:0px;"onclick="openSingle(\''+findID+'\')"/>';

answered Nov 27, 2012 at 13:31

Nelson Benítez León

51k8 gold badges70 silver badges84 bronze badges

Comments

Muthu Kumaran · Accepted Answer · 2012-11-27 13:31:36Z

0

try adding \' will fix the problem

var iconImage = '<img src="../../resources/images/annotation-icon.png" style="float:left; margin-left:20px; margin-right:0px;"onclick="openSingle(\''+findID+'\;)"/>';

answered Nov 27, 2012 at 13:31

Muthu Kumaran

18k5 gold badges50 silver badges72 bronze badges

Comments

Rookie Programmer Aravind · Accepted Answer · 2012-11-27 13:31:58Z

0

Here is the answer: with escaping character \ for ' character

var iconImage = '<img src="../../resources/images/annotation-icon.png" style="float:left; margin-left:20px; margin-right:0px;"onclick="openSingle(\''+findID+'\;)"/>';

Also try concating ‘and’

answered Nov 27, 2012 at 13:31

Rookie Programmer Aravind

12.2k23 gold badges84 silver badges117 bronze badges

Comments

hugomg · Accepted Answer · 2012-11-27 13:31:44Z

-1

One thing you could try doing is attach the onclick after you create the DOM node. This lets you be as flexible as you want and avoids having to eval strings and other things like that.

var domnode = /* get the image tag */
domnode.onclick = function(){ openSingle(findId) }

answered Nov 27, 2012 at 13:31

hugomg

70.4k30 gold badges168 silver badges257 bronze badges

Collectives™ on Stack Overflow

How can I pass a variable through an onclick event when javascript is creating the html?

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related