Path: csiph.com!aioe.org!news.mb-net.net!open-news-network.org!.POSTED.204.234.197.178.dynamic.wless.lssmb00p-cgnat.res.cust.swisscom.ch!not-for-mail From: Thomas 'PointedEars' Lahn Newsgroups: comp.lang.javascript Subject: Re: What's wrong with using a global id? Date: Fri, 02 Mar 2018 17:06:42 +0100 Organization: PointedEars Software (PES) Lines: 158 Message-ID: <11612235.kPQ6UWO93G@PointedEars.de> References: <1ec3czl2mmgku$.y2l7ncexmwul$.dlg@40tude.net> <1593727.VLH7GnMWUR@PointedEars.de> Reply-To: Thomas 'PointedEars' Lahn Mime-Version: 1.0 Content-Type: text/plain; charset="UTF-8" Content-Transfer-Encoding: 8Bit Injection-Info: gwaiyur.mb-net.net; posting-host="204.234.197.178.dynamic.wless.lssmb00p-cgnat.res.cust.swisscom.ch:178.197.234.204"; logging-data="21331"; mail-complaints-to="abuse@open-news-network.org" User-Agent: KNode/4.14.2 X-Face: %i>XG-yXR'\"2P/C_aO%~;2o~?g0pPKmbOw^=NT`tprDEf++D.m7"}HW6.#=U:?2GGctkL,f89@H46O$ASoW&?s}.k+&. On 2018-02-25, Thomas 'PointedEars' Lahn 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) > > > > > var n2 = document.createElement("span") > > n2.setAttribute("id", "otherrandomstring") > > window.otherrandomstring = 1 That is not a variable either. > > document.getElementsByTagName("body")[0].appendChild(n2) > > > > 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 and of course the FAQ (see below). -- PointedEars FAQ: | | Twitter: @PointedEars2 | Please do not cc me./Bitte keine Kopien per E-Mail.