I have a div inside the body on the same level as other divs.
and its CSS inside <header> among other styles:
<h1 class="abc">Header<br/>is required</h1>
<style type="text/css" media="screen">
margin: 100px auto;
border:1px solid #000000;
Now inside <script>:
var el = document.getElementById("soverlay");
Are you sure your condition is true? Is the script running before or after the DOM is built?
-The condition is true
-Newbie question: How can I identify when the Dom is built?
BTW, I just saw a suggestion on this forum and for the first time I tried the Chrome's dev tools
...and I got the error: "Uncaught TypeError: Cannot read property 'style' of null"
What null are they talking about? Isn't div id valid enough?
OK, I figured out that the order of markup and script = execution order. When I placed the script after the div, there was no null error.
That error likely means the document.getElementById failed, as it means that el == null and/or undefined.
You can consider the DOM to be built, or at least constructed enough to access the elements on the page to be any point in the markup AFTER the element is declared. If you put that script BEFORE the element in the markup (like in <head></head>) the element won't exist yet on the DOM (document object model) so the document.getElementById can't see it yet.
That is why (along with speeding up page loads) it's become common practice to put scripting right before </body>, as at that point in the markup all the DOM elements in the markup exist. It's also why some people wait until the 'onload' event fires.
IF your script is before the element is in the markup, it's going to fail as that element hasn't been added to the DOM yet.
First alert will say "undefined" or "null" (depending on browser), second alert will say "Object DOMElement", "object HTMLDivElement" or something similar (again depending on browser)... I think that's the clearest way to show that in action. The first one fails because that element doesn't exist yet.
... and it's part of why more and more developers are moving scripting out of head, out of the middle of the markup, and to right before </body>.
Really though, this is why it's VERY hard to diagnose problems from snippets, we can't see where you have your script or are including the script in the markup; so we can't say if it's failing for that reason, or maybe some other reason.
-- edit -- sounds like you figured out what I meant. Good to hear.
Yeah, I figured out that a bit late...
Thanks for the thorough explanation, those details are useful!
Yes, it is showing true condition.
Originally Posted by deathshadow
Users Browsing this Thread
There are currently 1 users browsing this thread. (0 members and 1 guests)
Tags for this Thread