Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #34756

Re: What's wrong with using a global id?

Show all headers | View raw

Jon Ribbens wrote:

> On 2018-02-25, Thomas 'PointedEars' Lahn <PointedEars@web.de> wrote:
>> JJ wrote:
>>> As long as there's a variable exist in the global context before the
>>> HTML element is added into the HTML document, the HTML element ID will
>>> never replace the existing variable.
>> The order does not matter at all.
> 
> What do you mean by that? What JJ said there appears to be true,

But it is not.  Their statement is gibberish; I understand it to mean:

“As long as a variable […] exist[s] in the global context before the HTML 
element is added [to] the HTML document, the [ID of that element] will never 
[cause the value of an existing variable to be replaced].”

And *it does not matter* whether a (global) variable was declared in a 
“script” element before or after the other element in question in source 
code order: the (global) variable *always* takes precedence.

Tested in an HTML5 environment in Chromium 57 (navigator.userAgent === 
"Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) 
Chrome/57.0.2987.98 Safari/537.36") and Firefox 52 (navigator.userAgent === 
"Mozilla/5.0 (X11; Linux x86_64; rv:52.0) Gecko/20100101 Firefox/52.0"), but 
AFAIK this has always been so in all scriptable Web browsers that had a 
considerable market share at the time.

Without creating a new HTML document, you can test it in the developer 
console of an existing HTML document in more recent versions of Web browsers 
as follows:

/* ---------------------------------------------------------------------- */
(function () {
  "use strict";

  function El (type, properties)
  {
    var el = document.createElement(type);

    /* NOTE: Does not handle nested properties */
    return Object.assign(el, properties);
  }

  function append (el)
  {
    return document.body.appendChild(el);
  }

  function execute (code)
  {
    return append(El("script", {
      type: "text/javascript",
      textContent: code
    }));
  }

  execute(`
    function tryAndCatch (f)
    {
      try
      {
        f();
      }
      catch (e)
      {
        console.error(e);
      }
    }

    tryAndCatch(function () {
      console.log("Before #foo (should throw instead): " + foo);
    });
  `);

  execute(`
    tryAndCatch(function () {
      console.assert(foo === void 0,
        "“foo” should be “undefined” before variable assignment");
    });

    var foo = 42;

    console.assert(foo === 42,
      "“foo” should be 42 after variable assignment");
  `);

  append(El("div", {id: "foo"}));
  append(El("div", {id: "bar"}));

  execute(`
    tryAndCatch(function () {
      console.assert(foo === 42, "“foo” should still be 42 after #foo");
    });

    tryAndCatch(function () {
      console.assert(bar === void 0,
        "“bar” should be “undefined” before variable assignment");
    });

    var bar = 11;

    console.assert(bar === 11,
      "“bar” should be 11 after variable assignment");
  `);
}());
/* ---------------------------------------------------------------------- */

> and of course gives the reason why relying on window[id] is a bad
> idea - because you don't know what different browsers or future
> browser versions already have in the window object and therefore
> you don't know whether window[id] will be your HTML element or
> something else entirely.

“window[id]” is _not_ a variable.  /Ex falso sequitur quodlibet/; even 
correct conclusions.
 
>   > var n = document.createElement("span")
>   > n.setAttribute("id", "randomstring")
>   > document.getElementsByTagName("body")[0].appendChild(n)
>   > console.log(window.randomstring)
> 
>     <span id="randomstring"></span>
> 
>   > var n2 = document.createElement("span")
>   > n2.setAttribute("id", "otherrandomstring")
>   > window.otherrandomstring = 1

That is not a variable either.

>   > document.getElementsByTagName("body")[0].appendChild(n2)
>   > <span id="otherrandomstring"></span>
>   > console.log(window.otherrandomstring)
> 
>     1

Your test case addresses a different situation than “JJ” described, it runs 
in a different execution context, and if it works, it produces potentially 
invalid markup.  Also, you have neglected to specify your test environment. 
So this is neither relevant nor convincing.

I suggest that you familiarize yourself with the basics of the used markup 
and programming languages first; then with the features of the HTML(5) DOM − 
including, but not limited to, shorthand properties like “id” and 
“document.body”.

Good starting points are

<https://developer.mozilla.org/en-US/docs/HTML>
<https://developer.mozilla.org/en-US/docs/JavaScript>
<https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model>

and of course the FAQ (see below).

-- 
PointedEars
FAQ: <http://PointedEars.de/faq> | <http://PointedEars.de/es-matrix>
<https://github.com/PointedEars> | <http://PointedEars.de/wsvn/>
Twitter: @PointedEars2 | Please do not cc me./Bitte keine Kopien per E-Mail.

Back to comp.lang.javascript | Previous | Next — Previous in thread | Find similar | Unroll thread

Thread

Re: What's wrong with using a global id? JJ <jj4public@vfemail.net> - 2018-02-25 22:20 +0700
  Re: What's wrong with using a global id? Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2018-02-25 17:37 +0100
    Re: What's wrong with using a global id? Julio Di Egidio <julio@diegidio.name> - 2018-02-25 09:16 -0800
      Re: What's wrong with using a global id? Julio Di Egidio <julio@diegidio.name> - 2018-02-25 10:19 -0800
    Re: What's wrong with using a global id? Jon Ribbens <jon+usenet@unequivocal.eu> - 2018-02-26 15:18 +0000
      Re: What's wrong with using a global id? Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2018-03-02 17:06 +0100

csiph-web