Applying an id creates a global variable

1

We discovered something interesting the other day. It turns out that if you manually apply an id to an element in the Identity inspector, it becomes a global variable.

One immediate advantage of this is that you can very simply access properties of any element without having to search for the element by id to start with. Thus,

var x = document.getElementById("banana"); 
x.style.color = "yellow";

simply becomes

banana.style.color = 'yellow';

One implication of this is that a project with sloppy namespacing would run into issues. Say you created a rectangle element and then added the id banana. Later on, you write

var banana = "I love bananas."

At this point, logging banana does not give you the string in praise of fruit, however. It gives you

<div class="HYPE_element" id="banana" hype_scene_index="0" style="pointer-events: auto; position: absolute; border: 1px solid rgb(216, 221, 228); background-color: rgb(232, 235, 237); overflow: visible; z-index: 1; width: 100px; height: 100px; transform-origin: 50% 50%; transform: translateX(249px) translateY(149px) rotateY(0deg);"></div>

which is clearly going to upset people not looking for it.

However, if you now write

window.banana = "I love bananas."

and log that, you now get the string which may have implications if you forget that you also have an element with that id.

Was this intentional on the part of Hype developers, and what other pitfalls and benefits might result?

2

I do not think this is a hype thing

from a none hype page.

07
Screen Shot 2019-02-12 at 13.14.07.jpg1106×456 77.4 KB

35

and I have pointed out a few times to make sure your vars do not match exactly any ids.

I normally try to put an underscore on vars/globals that I think will clash.

i.e

window.meid_ = ..

or even on normal vars

var meid_ = ..

3

Also just did a search and found where I first mention it..

It goes into some discussion on why you should avoid it and @jonathan provides a link explaining
but a simple google search reveals all..

4

Yeah, this has just been part of HTML and JS forever. We would never do such a dumb idea :rofl:. Frankly I’m surprised JS’s use strict mode still allows it.

5

thanks for the replies. Yes, it’s our lack of experience in code that led us to think this might be a Hype thing. Still surprising how lax JS is with stuff like this as you say Jonathan.

Thanks for the link Mark… nice to see that we’re only 3.5 years late to that party!

2 Likes