Same javascript variable and html element names are in different namespaces and do not conflict?

Question

javascript and html names are in different namespaces and do not conflict?

I mean in the code below "numberInputBox" in html and in javascript contextsare different, or there could be a problem?

<body>

<input name="numberInputBox" type="text" ></td>

<script type="text/javascript">
    var numberInputBox = document.getElementById("numberInputBox");
</script>

</body>

What exactly do you mean by "*html names*"? Yes, ids in a document live in their own namespace. — Bergi, Nov 19 '18 at 11:05
Actually [all ids also become implicit global variables because IE did it](https://stackoverflow.com/q/3434278/1048572), but JS always can override that. There won't be any problem. — Bergi, Nov 19 '18 at 11:07

score 0 · Accepted Answer · answered Nov 19 '18 at 11:08

Given an element with an id or name, browsers will create global JS variables containing references to them.

var numberInputBox = document.getElementById("numberInputBox"); would overwrite that variable. This would not affect the HTML element.

It could only cause problems if some other code attempted to use the global variable and expected it to have its original value (although in this case, the original value is the same as the new value).

In general, it is best to avoid creating global variables so that different scripts don't get in each other's way.

You can use an IIFE to scope them.

(function () {
    var numberInputBox = document.getElementById("numberInputBox");
    // Do other stuff with numberInputBox here because it is local to this function
}());

Same javascript variable and html element names are in different namespaces and do not conflict?

1 Answers1