DOM elements with an Id that isn't in quotes, used in js file as if its an object

Question

I've been taking some animations from codepen.io and refactoring them into classes.

I've seen this syntax a couple times that I've never seen before, where in the HTML file, an element is present that has an id -that is not in quotes-.

I noticed this at first when I was trying to figure out where some of the variables in the JS referred to.

Whats up with this way of doing things? I've noticed it in a few different animations from codepen.

var w = c1.width = c2.width = window.innerWidth,
    h = c1.height = c2.height = window.innerHeight,
    ctx1 = c1.getContext('2d'),
    ctx2 = c2.getContext('2d'),
    
    constAmount = ((w*h)/8000)|0,
    minSpeed = 5,
    maxSpeed = 7,
    minSize = 20,
    maxSize = 30,

<body>

  <canvas id=c1></canvas>
  <canvas id=c2></canvas>

  <script src="js/index.js"></script>

</body>

</html>

Also another quick question, what is the syntax h = c1.height = c2.height = window.innerHeight?

Does that mean both c1.height and c2.height are equal to the last? or does c1.height only equal window.innerHeight because c2.height equals it?

score 2 · Accepted Answer · edited Jun 20 '20 at 09:12

2

You don't have to use quotes in HTML5. The reason they exist is so you can have complex strings with whitespace, =, et cetera.

Examples

www.mysite.com -> No Quotes

My Site -> Quotes

www.mysite.com?query=string ->Quotes

Links

Here's a question describing that in more detail

I recommend writing XHTML which is "good practice html"

An article on nice syntax

I don't recommend doing it because it's bad practice or just something you should avoid.

h = c1.height = c2.height = window.innerHeight

This is a short way to set multiple values to each other, This written out is:

c2.height = window.innerHeight
c1.height = c2.height
h = c1.height

Or:

h = (c1.height = (c2.height = window.innerHeight))

This made c2.height, c1.height, and h, all equal to window.innerHeight

This lets you avoid doing :

h         = window.innerHeight;
c1.height = window.innerHeight;
c2.height = window.innerHeight

edited Jun 20 '20 at 09:12

Community

1
1

answered Apr 26 '15 at 19:42

Downgoat

13,771
5
46
69

Okay great so that explains that little bit. But I was also noticing in the javascript, its like these elements can be referred to as if they are an object named by the id. I'm seeing things like `c1.width` without anything like `var c1 = document.getElementById("c1")` Is that also html 5? – realisation Apr 26 '15 at 20:00
@Femtosecond Yeah, that's JavaScript. I answered a question [here](http://stackoverflow.com/a/29871978/1620622) is describes who every thing in JavaScript is a reference – Downgoat Apr 26 '15 at 20:00
@Femtosecond Basically, it sets the variable to that element, that allows you to write the variable name instead of `document.getElementById()` every time. It's not really HTML 5 just Javascript – Downgoat Apr 26 '15 at 22:38
So how is it that in the animation I downloaded - before trying to put it into a discreet Class - c1 isn't instantiated anywhere in the JS, and only appears anywhere else in the HTML at the element tag where the id is defined and it still works? – realisation Apr 27 '15 at 01:51
@Femtosecond If you could show me the code I could help you more but usually Canvases are made with javascript. – Downgoat Apr 27 '15 at 02:02
I would but the snippets in the post are the only places where c1 or c2 are mentioned. In this case there are two canvases just put into the HTML with ids c1 and c2, and then in the very beginning of the JS file it goes `var w = c1.width yadayadayada` – realisation Apr 27 '15 at 02:28
@Femtosecond that seems a bit odd... Perhaps post another question regarding this on `codereview.stackexchange.com` or put the code in at www.pastebin.com – Downgoat Apr 27 '15 at 02:36

score 1 · Answer 2 · answered Apr 26 '15 at 19:34

1

Quotes are optional from html element attributes in Html 5.

Here you can review some of the best practices for using quotes in attributes. http://www.webdirections.org/blog/five-reasons-why-you-should-quote-attribute-values-in-html5/

As far as your second question, all of the values will be equal to the innerHTML value of the right most expression. So h, c1.height and c2.height will be equal to window.innerHTML.

answered Apr 26 '15 at 19:34

Carlos Pinto

538
1
4
12

Okay great so that explains that little bit. But I was also noticing in the javascript, its like these elements can be referred to as if they are an object named by the id. I'm seeing things like c1.width without anything like var c1 = document.getElementById("c1") Is that also html 5? – realisation Apr 26 '15 at 20:00
That has nothing to do with it being html5 specific. Your code is referring to an object called c1 with a property called width, where c1 must have been declared and defined previously in your code. @Femtosecond – Carlos Pinto Apr 26 '15 at 20:08
but it was declared in the HTML file? hm neat – realisation Apr 26 '15 at 23:39
@Femtosecond no that needs to be inside of a – Carlos Pinto Apr 27 '15 at 00:14
no - it seems like that isn't the case. the animation works as downloaded from codepen with no instantiation of the object anywhere in the js, just called like `c1.width`. – realisation Apr 27 '15 at 01:49

DOM elements with an Id that isn't in quotes, used in js file as if its an object

2 Answers2