JS: Double- Or Singe Quotes Shouldn't Matter; But They Do

[redc3ll]

Hello,

I have just begun learning JS at W3 Schools.
At the Introduction(https://www.w3schools.com/js/js_intro.asp), it is stated that JS is insensitive to the use of either single- or double quotes.
The Introduction states these two lines are the same:

document.getElementById(“demo”).innerHTML = “Hello JavaScript”;

And:

document.getElementById(‘demo’).innerHTML = ‘Hello JavaScript’;

The first uses double quotes and the second singe quotes.
However, the exercise for changing the src of an image reveals a quote-sensitivity:

On Off

Here, getElementById(‘myImage’) uses single quotes. This functions properly when ran; please see JSfiddle for example: https://jsfiddle.net/d6kac84f/

However, in the following code I use double quotes to enclose myImage, yielding an apparent syntax error:

On Off

See JSfiddle: https://jsfiddle.net/x42o7sgp/
The JSfiddle console states the following (as a neophyte to me yet unintelligible):

Quote:
“39:129 Uncaught SyntaxError: Unexpected end of input”
“41:130 Uncaught SyntaxError: Unexpected end of input”

This is strange, because the above two codes use singe- and double quotes without yielding a syntax error:

document.getElementById(“demo”).innerHTML = “Hello JavaScript”;
document.getElementById(‘demo’).innerHTML = ‘Hello JavaScript’;

It is as if the sensitivity suddenly lies within the parenthesis:

On (This one works)
<button onclick="document.getElementById(“myImage”).src=‘https://www.w3schools.com/js/pic_bulbon.gif’ ">On (This one doesn’t work)

Thank you, should you be willing to point me in the right direction.

SilverC3ll

[SamA74]

I’m guessing it is because you are nesting quotes here, that’s why it’s causing a problem.

<button onclick="document.getElementById("myImage").src='https://www.w3schools.com/js/pic_bulbon.gif' ">On</button>

The second opening double quote (on "myImage) is ambiguous and seen as closing the first double quote.

[Archibald]

You will find this works:

<button onclick="document.getElementById('myImage').src='https://www.w3schools.com/js/pic_bulbon.gif' ">On</button>

[SamA74]

It may also be worth noting beore you get too deep into your learning that the examples there may not be up to date.
It is considered best to avoid things like in-line onclick attributes and instead use event listeners separate to the HTML.
While W3Schools is very popular and always comes up in search, it’s not the best maintained in terms of keeping current.

[redc3ll]

Thank you; that is indeed the code that works. I’m however a bit puzzled as why W3 states JS is indifferent to double- and single quotes, while this is evidently not true, demonstrated by their own examples provided at that.

[redc3ll]

Thank you SamA74; I feared as much. What would be a more relevant tutorial to follow? I know JS has gone through quite a few revolutions, such as var having become rather outdated and let being its contemporary replacement. Quite a few books I got hold of still use var a lot, and even as a neophyte I seemed to notice that something was off here.

[Archibald]

@redc3ll

I’m however a bit puzzled as why W3 states JS is indifferent to double- and single quotes, while this is evidently not true, demonstrated by their own examples provided at that.

If you need to put code within quotes then it does not matter whether you use single or double quotes. However if you start with a single then you must finish with single and if you start with a double then you must finish with a double. As demonstrated in my code it can be very convenient to use both single and double so you can nest: the whole onclick code is within double quotes and the ID and filename are within single quotes.

[rpg_digital]

@redc3ll

Thank you SamA74; I feared as much. What would be a more relevant tutorial to follow? I know JS has gone through quite a few revolutions, such as var having become rather outdated and let being its contemporary replacement. Quite a few books I got hold of still use var a lot, and even as a neophyte I seemed to notice that something was off here.

This is nothing new.

For an up to date and authoritative reference/guide you have MDN

JavaScript — Dynamic client-side scripting - Learn web development | MDN

A book that I would recommend having in your library is ‘Javascript the Definitive Guide’, now on the Seventh Edition.

Also here on Sitepoint there is an extensive library of books and guides, with dedicated support here on the forum.

JavaScript Books and Courses | SitePoint Premium

For free videos, on youtube I think these guys are very good.

https://www.youtube.com/@WebDevSimplified/videos

https://www.youtube.com/@NetNinja

[dennisjn]

You cannot nest double quotes within double quotes
The line

onclick="document.getElementById(“myImage” ).src=‘https://www.w3schools.com/js/pic_bulbon.gif’
is interpreted as containing two strings

“document.getElementById(”

and

").src=‘https://www.w3schools.com/js/pic_bulboff.gif’ "

Js does not like nesting strings within strings using the same gylf

[rpg_digital]

Just to point out in Javascript you can escape quotes with a back slash.

const strg1 = 'It\'s Peter\'s ball'
const strg2 = "\"It's his ball,\" said Jane"

That is a bit fiddly and difficult to read. So another alternative is to use a template string, which uses backticks `

const strg3 = `It's Peter's ball. "It's his ball," said Jane`

[PaulOB]

@redc3ll

I’m however a bit puzzled as why W3 states JS is indifferent to double- and single quotes,

Just to clarify a point I didn’t see mentioned yet.

onclick=""

The above is an html attribute. You get a JavaScript error because the html parser closes the attribute at the next matching quote it sees and the Js that is trying to run is effectively this:

<button onclick="document.getElementById(">On</button>

The rest of your js is no longer js and becomes some undefined html attribute that may well break other html on the way

The other posters have all explained how to avoid this error

[ladans37]

I always wondered which quotes to use. But yeah it seems it doesn’t matter.

[Gandalf]

@redc3ll

I’m however a bit puzzled as why W3 states JS is indifferent to double- and single quotes, while this is evidently not true,

JS is indifferent. The problem here is that you have tried to nest double quotes within double quotes and there are few (if any) programming languages that permit that. The same is true for single quotes.

[Pepster64]

<button id="myButton">On</button>

const myButton = document.getElementById('myButton');
const myImage = document.getElementById('myImage');

myButton.addEventListener('click', function() {
  myImage.src = 'https://www.w3schools.com/js/pic_bulbon.gif';
});

[redc3ll]

Thank you everyone for your great answers.

[Paul_Wilkins]

I find that style guides tend to settle on a preference of using double quotes.

There are several reasons for that. One is that apostrophes don’t need to be escaped when using double quotes. Another is that you are not supposed to embed HTML code inside of your JavaScript code, so standardising on using double quotes in JavaScript for text, and double quotes in HTML for attributes, helps to encourage that separation.

Because though there are good arguments on both sides of the discussion, choose a single style guide to use.

10 Best JavaScript Style Guides Including airbnb & Idiomatic

Until you settle on a style guide for you and your team to use you will instead be wasting time reformatting others’ code to fit your own personal style, that will only be reformatted once again when someone with different standards comes to it.

Ensure that everybody on your team is using that same style guide and you will be free of arguments about which type of quote, or how many spaces or tabs to use. When you are all working from the same style guide, you can stop wasting time, and can actually get on with focusing on the coding problem at hand.