CODEWITHSUNDEEP
javascriptquotes
Ashish Nair
Ashish Nair

Reputation: 81

Javascript in html - Using single quote inside another single quote

document.getElementById("img").innerHTML="< img src='/sitepath/"+imgg+".jpg' width='72' height='44' onclick='alert('hello');' />";

The above code is my javascript. Problem is printing hello or any other string. If I just type 123 in place of hello, it does give alert. But am not able to use a string like hello there. Normally a string in an alert function is kept inside quotes ' ' but the entire content is inside double quotes and I have already used single quote at the beginning of onclick function. I tried using Escape character ("\") but it didnt help. Any suggestions?

Upvotes: 8

Views: 45665

Answers (7)

MA9H
MA9H

Reputation: 1909

I tried using Escape character ("\") but it didnt help

Javascript is different from C#, you just use it twice at a time, example: alert('We are\\'t going to go')

Upvotes: 1

Masood Ahmad
Masood Ahmad

Reputation: 38

You will need to use the double quotes and escape it in the onclick attribute

document.getElementById("img").innerHTML="&lt;img src='/sitepath/"+imgg+".jpg' width='72' height='44' onclick=\"alert('hello');\" /&gt;";

Upvotes: 0

blaise
blaise

Reputation: 393

what if someone needs to send a variable instead of a string "hello"? Something like this:

function showContent(toPopulate) { 
      document.getElementById(toPopulate).innerHTML = "<a href='javascript:showOtherContent(*toPopulate*);'>show</a>"
}

function showOtherContent(toPopulate) {...}

so how to send toPopulate as a variable to showOtherContent()?

The above is solved like this:

document.getElementById(toPopulate).innerHTML = "<a href='javascript:showOtherContent(\"" + toPopulate + "\");'>show</a>"

Upvotes: 0

bobince
bobince

Reputation: 536329

You have JavaScript inside HTML inside JavaScript. That's naturally confusing. Better to avoid the string-slinging problems of quoting and escaping (which, got wrong, can easily lead to security holes when user-submitted data is used), and do it the DOM way:

var img= new Image();
img.src= '/sitepath/'+imgg+'.jpg';
img.width= 72;
img.height= 44;
img.onclick= function() {
    alert('hello');
};
document.getElementById('img').appendChild(img);

Upvotes: 4

Guffa
Guffa

Reputation: 700152

If you use apostrophes as delimiter for the HTML attributes, you have to HTML encode the apostrophes that you put inside the attribute:

document.getElementById("img").innerHTML="< img src='/sitepath/"+imgg+".jpg' width='72' height='44' onclick='alert(&#39;hello&#39;);' />";

I prefer using apostrophes as string delimited in Javascript and quotation marks as delimiters for HTML attributes. Then you just escape the apostrophes that you have inside the Javascript string:

document.getElementById("img").innerHTML='< img src="/sitepath/'+imgg+'.jpg" width="72" height="44" onclick="alert(\'hello\');" />';

To put any string inside a Javascript, inside an HTML attribute, inside a string in Javascript, you do:

  • escape any string delimiters in the string
  • HTML encode the Javascript code
  • escape any string delimiters in the HTML string

Upvotes: 10

Tracker1
Tracker1

Reputation: 19334

It doesn't matter if your outer quotes are single or double. You can escape a character within an outer string with a backslash... \' becomes ' within the string itself. Either Darin's or Masood's example will work. But Masood is ignorant in reference to a need to use double-quotes as the outside enclosure.

Upvotes: 0

Darin Dimitrov
Darin Dimitrov

Reputation: 1038710

Try this:

document.getElementById("img").innerHTML = '<img src="/sitepath/' + imgg + '.jpg" width="72" height="44" onclick="alert(\'hello\');" />';

Upvotes: 16

Related Questions