Is it possible to replace these single quotes with double quotes?

Question

I'm having some trouble trying to replace the single quotes ('...') with double quotes("...") in the following piece of code:

<img id="image" src="images/bird.jpg"  onmouseover="PlaySound('mySound'); this.src='images/bird_second_frame.jpg'" 
onmouseout="StopSound('mySound'); this.src='images/bird.jpg'">

Whenever I attempt to replace the single quotes with doubles, the code breaks, and I can't seem to find a different solution. I've been told not to use single quotes at all - is this an exception?

Any help is appreciated.

Single quotes and double quotes in JavaScript are interchangeable. — Pointy, Nov 04 '16 at 13:13
http://stackoverflow.com/questions/16450250/javascript-replace-single-quote-with-double-quote — prasanth, Nov 04 '16 at 13:15
It's a stylistic thing mostly. if you normally use double quotes then when you build stuff inside of strings that represent strings you can either escape them or use single quotes. Since escaping is a PITA, using the other quote type is a lot easier and saner. In this example, using double quoted attributes for HTML is good. Then using single quotes to quote the string values in JS is perfectly acceptable, and in fact I don't think you can escape the quotes here anyway because HTML doesn't deal with that very well. — JVDL, Nov 04 '16 at 13:19
@Dymos it's ugly, but HTML entity notation does work reliably. — Pointy, Nov 04 '16 at 13:21
@Pointy true enough. Not worth the lack of readability though ;) — JVDL, Nov 04 '16 at 13:30
Thank you to everyone for replying so quickly - I learned something from each post. Issue is solved - I now understand the &quot method, but it is pretty unsightly. Perhaps the best thing is to leave it with single quotes after all. I appreciate everyone's input! — Des, Nov 04 '16 at 13:32

Quentin · Accepted Answer · 2016-11-04T13:21:45.330

You can't use a literal " inside an HTML attribute value delimited by " characters. It will terminate the attribute value prematurely.

You can include one as ", but that would make the code significantly harder to read.

<img id="image" src="images/bird.jpg" onmouseover="PlaySound(&quot;mySound&quot;); this.src=&quot;images/bird_second_frame.jpg&quot;" onmouseout="StopSound(&quot;mySound&quot;); this.src=&quot;images/bird.jpg&quot;">

I've been told not to use single quotes at all - is this an exception?

No. You've just been given bad advice.

JavaScript and HTML don't distinguish between ' and " except when determining which characters can appear between them without being escaped.

Using ' in your example is simply more readable.

A better approach would be to avoid inline JavaScript entirely though.

<img id="image" 
     src="images/bird.jpg"
     data-sound="mySound"
     data-frame="images/bird_second_frame.jpg">

<script>
    var element = document.getElementById("image");
    element.addEventListener("onmouseover", play);
    element.addEventListener("onmouseover", stop);

    function play() {
        PlaySound(this.dataset.sound);
        this.dataset.original = this.src;
        this.src = this.dataset.frame;
    }

    function stop() {
        StopSound(this.dataset.sound);
        this.src = this.dataset.original;
    }
</script>

score 3 · Answer 2 · answered Nov 04 '16 at 13:17

3

You can't use double quotes inside of a string that's bounded by double quotes because they would end the string.

Your use of single quotes looks appropriate in this case.

answered Nov 04 '16 at 13:17

neuhaus

3,886
1
10
27

score 1 · Answer 3 · answered Nov 04 '16 at 13:18

You can use single quotes freely in JavaScript; they're syntactically equivalent to double-quote characters (though any single string constant must be bound by the same kind of quote). That goes for HTML too, so you can get double quotes in your JavaScript by using single quotes for the attribute value delimiters:

<button onclick='alert("Hello World")'>Click Me</button>

However if you really want double quotes everywhere, you can escape them as HTML entities:

<button onclick="alert(&quot;Hello World&quot;)">Click Me</button>

That's pretty ugly but it works: the HTML parser is specifically looking for quote characters.

The best thing to do is to stop embedding your JavaScript event handler setup in your HTML and do it purely with JavaScript.

Is it possible to replace these single quotes with double quotes?

3 Answers3