javascript single quote / double quote

Question

this is my original html codes:

<div>
    <img src="image/sample.jpg" onmouseover="showTitle('title')">
</div>

But I need it to be converted to javascript, for condition if {{IMAGE(z1)}} do exist, then var x, would be written out as html.

 <script>
    if ("{{IMAGE(z1)}}" != "") { var x = "<img src="image/sample.jpg" onmouseover='showTitle('title')'></div>"; 
    document.write(x); } 
 </script>

The image does show; however, it wont read/execute the related javascript functions.

HTML:

onmouseover="showTitle('title')"

Javascript variable double quote (failed):

var x = "onmouseover="showTitle('title')""

Javascript variable single quote (failed):

var x = "onmouseover='showTitle('title')'"

Do you know a workaround of this? Thanks in advance!!

Why not avoid the whole problem by attaching the handler externally instead of inline? — Evan Davis, Mar 20 '15 at 17:40
Escape all double and single quotes inside your js var with a backslash \ — Stefaan Neyts, Mar 20 '15 at 17:41

score 1 · Accepted Answer · answered Mar 20 '15 at 17:41

1

var x = "<img src=\"image/sample.jpg\" onmouseover=\"showTitle('title')\"></div>";

answered Mar 20 '15 at 17:41

Mike Loffland

344
1
10

so whenever the html has double quote " i can replace it with \" inside my variable correct? – Dylan Daicy Siao Mar 20 '15 at 17:51
Basically... you use the backslash to "escape" special characters in JavaScript. https://msdn.microsoft.com/en-us/library/ie/2yfce773%28v=vs.94%29.aspx – Mike Loffland Mar 20 '15 at 18:24

score 1 · Answer 2 · answered Mar 20 '15 at 17:53

Note you are missing the starting <div> and you need to ensure to escape quotes. Try and use single quotes inside double quotes and vise-versa, only escape when you have to:

var x = "<div><img src='image/sample.jpg' onmouseover='showTitle(\"title\")'></div>";

When you want to place a double quote inside double quotes you need to escape the inside with \" the same applies to single quotes \':

" \" " -- Double Quotes Escape
' \' ' -- Single Quotes Escape

Also note unless you are using a library that interprets {{ .. }}, this condition "{{IMAGE(z1)}}" != "" will always be true.

thank you for your detailed explanation. learning some terms i didnt know. Thank you once again — Dylan Daicy Siao, Mar 20 '15 at 18:11

score 0 · Answer 3 · answered Mar 20 '15 at 17:49

Main error : change ,

 var x = "<img src="image/sample.jpg" onmouseover='showTitle('title')'></div>";

To

 var x = "<img src=\"image/sample.jpg\" onmouseover=\"showTitle('title')\"></div>";

By the way your method is actually bad.

I wonder if that if would work... I dont know much of js but i would say, leave that method.

Second, use jquery if possible .

U can simple do

$("#i").mouseover(function(){
showTitle('title'); });

Where i is the id of image

javascript single quote / double quote

3 Answers3