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.

Answer 1

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>

Answer 2

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.

Answer 3

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.