Hello everyone! This is my first time at webmaster-talk, I was referred by someone in web_design.reddit, for some basic javascript help.

I'm trying to learn the ins and outs of javascript and I'm making a website where I have some 800x250 images that I want to splash the center of the screen when you click the thumbnail and close again when the splash is clicked.

However, I am having some trouble with creating elements, appending them, and removing them. Here is my script:

PHP Code:

            var bigImg = null; 
            var parent = document.getElementById("content"); 
 
            function makeBig(source) { 
                bigImg = document.createElement('img'); 
                parent.appendChild(bigImg); 
                bigImg.style.position="absolute"; 
                bigImg.style.left=((winWidth() - 800)/2) + "px"; 
                bigImg.style.top=((winHeight() - 250)/2) + "px"; 
                bigImg.src=source; 
                bigImg.id="bigImg"; 
                bigImg.onclick=killBig(); 
            } 
 
            function killBig() { 
                parent.removeChild(bigImg); 
                bigImg = null; 
            } 
 
            function showBig(source) { 
                if (bigImg !== null) { 
                    killBig() 
                } 
                makeBig(source); 
            } 


And when I try it, I get this error: "parent is null" which lists this line as the offender:

PHP Code:

parent.removeChild(bigImg); 


inside the killBig() function.

All help is greatly appreciated! Thanks.

Move the script from in the document head to between the closing </body> and the closing </html>

It will work then.

Then see if you can tell us why.

Originally Posted by chrishirst

Move the script from in the document head to between the closing </body> and the closing </html>

It will work then.

Then see if you can tell us why.

Hmmmmmmmm, I moved the script and it isn't working still... I gave the bigImg a z-index of 5 so it should be on top of everything else. However, I'm not getting any errors in the console now. What difference does it make if the script is between the closing body and html tags?

What difference does it make if the script is between the closing body and html tags

You are supposed to be working out why it doesn't cause errors.

But it is because the element "content" now exists when the script runs.

We need a URL so we can see ALL the code.

Originally Posted by chrishirst

You are supposed to be working out why it doesn't cause errors.

But it is because the element &quot;content&quot; now exists when the script runs.

We need a URL so we can see ALL the code.

http://dl.getdropbox.com/u/413030/Portfolio/index.html Thanks, it helps me a lot to have some feedback to get past the learning curve. I'm trying to get a job as "web content editor" at my school and I think it's mostly writing, but you have to have web skills too. Thanks.

Nevermind. I just made the images load normally but with display:none and used javascript to bring them forward when needed. Thanks for the help.