Menu
In Microsoft IE and (according to comments) Edge, getElementById() on an ID that is exactly "extTabsBodyEleFile1273551781_renderTo" fails.
<!DOCTYPE HTML>
<html>
<body>
<div id="extTabsBodyEleFile1273551781_renderTo"></div>
</body>
</html>
This ID was automatically generated. Changing the ID in any way fixes the problem. Getting the parent of the div and listing its child nodes also includes the div.
The error could be reproduced on both IE 11.0.9600.19155 and 11.0.9600.18538 - but it worked on another machine with IE 11...19155 without issues.
The error can also be reproduced if you open the developer console on a random site, change the ID of any element in the DOM explorer to the ID above and then try to get that element by document.getElementById('extTabsBodyEleFile1273551781_renderTo')
I realize that it is an Edge bug and fixing it would just mean changing the ID. My question is why it happens, why it didn't happen on one instance of Edge (I couldn't find setting differences) and how I could generate the ID to ensure it doesn't happen again. It's easy to change it at this place, but without knowing why it happened, it could happen again.
Is there a known hash or number combination an ID is not supposed to have? Is it a legacy setting that I could potentially turn off using meta tags?
I hope this question is not too unspecific for SO - Searching for it proved fruitless because of the legion of getElementById-related questions.
console.log(document.getElementById('extTabsBodyEleFile1273551781_renderTo'));<div id="extTabsBodyEleFile1273551781_renderTo"></div>Update:
It seems the ID fails in a case insensitive matter:
extTabsBodyEleFile1273551781_renderTo
exttabsbodyelefile1273551781_renderto
EXTTABSBODYELEFILE1273551781_RENDERTO
ExttAbsbOdyELEfILE1273551781_rEndErtO
All cause the error.
Update:
IE Developer console seems to be at least involved in the error. Opening a test HTML page that displays the result of trying to retrieve an Element by that ID inside itself instead of logging it to the console works as expected if IE was started with the console closed - until the console is opened and the page refreshed a couple (1-5) of times, whereupon the error appears again and persists until IE is closed and reopened. Closing the developer console after the error appeared seems not to have an effect.
Test HTML is hosted at netlify, HTML code:
<!DOCTYPE HTML>
<html>
<head>
<style>
table, th, td {border: 1px solid black;border-collapse: collapse;}
th, td {padding: 15px;}
</style>
</head>
<body>
<div id="extTabsBodyEleFile1273551781_renderTo"></div>
<div><p id="testresult"></p></div>
<script>
var testresults = document.getElementById('testresult');
var time = new Date().getTime();
testresults.innerHTML = "<h3>testresults:</h3><br><table><tr><th>ID</th><th>Result</th><th>Time</th></tr>" +
'<tr><td>extTabsBodyEleFile1273551781_renderTo: ' + "</td><td>" + document.getElementById('extTabsBodyEleFile1273551781_renderTo') + "</td><td>" + time + "</td></tr>" +
'<tr><td>extTabsBodyEleFile1273551781_renderTo through querySelector: ' + "</td><td>" + document.querySelector('*[id="extTabsBodyEleFile1273551781_renderTo"]') + "</td><td>" + time + "</td></tr>" +
'</table>';
</script>
</body>
</html>
456
If there is no element with the given id , this function returns null . Note that the id parameter is case-sensitive, so document. getElementById("Main") will return null instead of the element <div id="main"> because "M" and "m" are different for the purposes of this method.
getelementbyid(...) is null would seem to indicate that there is no such element with an ID passed to getElementById() exist. This can happen if the JavaScript code is executed before the page is fully loaded, so its not able to find the element.
The getElementById() method returns an element with a specified value. The getElementById() method returns null if the element does not exist. The getElementById() method is one of the most common methods in the HTML DOM. It is used almost every time you want to read or edit an HTML element.
The getElementById() is a DOM method used to return the element that has the ID attribute with the specified value. This is one of the most common methods in the HTML DOM and is used almost every time we want to manipulate an element on our document. This method returns null if no elements with the specified ID exists.
TL;DR
It looks like there are specific strings edge return null if you try to select them, there are 3 strings i found that can't be selected in this fiddle: https://jsfiddle.net/cogwrudx/4/
I have run tests from 1273 to 1290 ids and found only 3, but i guess there could be more, I don't know why those strings so important that edge doesn't allows to search for them.
Origin
I can't comment but this was really annoying me so I had to do some more testings, and it looks like no matter what changes you will do to this string it will work, but it will NOT work for this exact string.
Adding/removing any letter/number will work. Changing the last number before the underscore to 2 instead of 1 will work as well. In fact changing any number to a different number works.
It looks like edge doesn't like that specific string for a reason and I really want to know why.
EDIT 1
After doing some more basic testing I have run the next fiddle: https://jsfiddle.net/cogwrudx/4/
As you can see after running it and looking the console, there are 2 more ids he doesn't find:
not found: extTabsBodyEleFile1273351781_renderTo
not found: extTabsBodyEleFile1273451781_renderTo
not found: extTabsBodyEleFile1273551781_renderTo
So from this i think there is no obvious pattern to avoid as others suggested, but a very specific strings to search for, as if you try to set the same strings as classes it will not work as well.
FYI
I was testing this on Edge browser on Windows 10, and not IE11.
Microsoft Edge 42.17134.1.0
Microsoft EdgeHTML 17.17134
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
