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>';

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>';

• javascript
• onclick

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

5 Answers 5

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 ments suggested you should ideally avoid inline Javascript

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+'\')"/>';

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+'\;)"/>';

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’

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) }