javascript hide the rest of sections while onmouseover

I have 4 <li> and I like them to become the trigger of linked images. I use javascript here and this project does not allow jQuery. Please refer to the code snippet.

	var children = document.querySelectorAll('#resistorContent > section[id]');
	function showDetailContent(target) {
    // Simply loop over our children and ensure they are hidden:
    for (var i = 0, child; child = children[i]; i++) {
        child.style.display = 'none';
    }
    // Now, show our child we want to show
    document.getElementById(target).style.display = 'block';
}

/* Start Hidden, show first */
#resistorContent > section[id] {
    width: 940px;
    height: 400px;
    overflow: hidden;
    display:none;
}
#resistorContent > section[id]:first-child {
    display: block;
}

<div id="resistorContent">
  <section id="resistorDetail1"><img src="http://d3d71ba2asa5oz.cloudfront.net/40000483/images/pic1.jpg" alt=""></section>
  <section id="resistorDetail2"><img src="http://d3d71ba2asa5oz.cloudfront.net/40000483/images/pic2.jpg" alt=""></section>
  <section id="resistorDetail3"><img src="http://d3d71ba2asa5oz.cloudfront.net/40000483/images/pic3.jpg" alt=""></section>
  <section id="resistorDetail4"><img src="http://d3d71ba2asa5oz.cloudfront.net/40000483/images/pic4.jpg" alt=""></section>
    <ul>
      <li onmouseover="showDetailContent('resistorDetail1')">Hover 1!</li>
      <li onmouseover="showDetailContent('resistorDetail2')">Hover 2!</li>
      <li onmouseover="showDetailContent('resistorDetail3')">Hover 3!</li>
      <li onmouseover="showDetailContent('resistorDetail4')">Hover 4!</li>
    </ul>
  </div>
</section>

It works quite fine in jsfiddle and here in the code snippet. But if you paste them to your text editor and preview it in the browser, it renders different result. It creates a pile of all 4 images and it is not hiding the image as javascript intended. What did I do wrong here?

Thanks in advance.

Solution

I'm fairly certain the issue is that you are loading your script in the <head> element in your document. This causes an issue because your script tries to loop over the DOM and make changes, but if your script is in the <head> tag, it's executing before the DOM that contains the images is ready. That would be why the images are not being hidden and just stacking. Try running the script just before the closing </body> tag. Your file should look similar to this (but generally it's better to use external stylesheets and link to your javascript files):

<!DOCTYPE html>
<html>
<head>
    <title>Testing DOM loading and script placement</title>
    <style type="text/css">
        /* Start Hidden, show first */
        #resistorContent > section[id] {
            width: 940px;
            height: 400px;
            overflow: hidden;
            display:none;
        }
        #resistorContent > section[id]:first-child {
            display: block;
        }
    </style>
</head>
<body>
    <div id="resistorContent">
        <section id="resistorDetail1"><img src="//placehold.it/940x450/5B696A/fff/&text=PIC+1" alt=""></section>
        <section id="resistorDetail2"><img src="//placehold.it/940x450/4D686B/fff/&text=PIC+2" alt=""></section>
        <section id="resistorDetail3"><img src="//placehold.it/940x450/415558/fff/&text=PIC+3" alt=""></section>
        <section id="resistorDetail4"><img src="//placehold.it/940x450/345658/fff/&text=PIC+4" alt=""></section>
            <ul>
                <li onmouseover="showDetailContent('resistorDetail1')">Hover 1!</li>
                <li onmouseover="showDetailContent('resistorDetail2')">Hover 2!</li>
                <li onmouseover="showDetailContent('resistorDetail3')">Hover 3!</li>
                <li onmouseover="showDetailContent('resistorDetail4')">Hover 4!</li>
            </ul>
        </section>
    </div>
    <script>
        var children = document.querySelectorAll('#resistorContent > section[id]');
        function showDetailContent(target) {
            // Simply loop over our children and ensure they are hidden:
            for (var i = 0, child; child = children[i]; i++) {
                child.style.display = 'none';
            }
            // Now, show our child we want to show
            document.getElementById(target).style.display = 'block';
        }
    </script>
</body>
</html>

Here's a demo that doesn't rely on the platform inserting the javascript in the right spot: http://jsbin.com/qulajeroru/2/edit?html,output (click "Run with JS")