images not appending, errors: NS_ERROR_INVALID POINTER

Okay, here is the page: http://www.therabbitshome.com/

Wait for "BROWSE ART" to appear, then click it.

Both "PREV" and "NEXT" should appear toward the bottom of the big black box that expands. But only "PREV" appears. Also, an image of a magnifying glass should appear in the black box, but it doesn't. I get these errors in Iceweasel (Debian rebranding of Firefox):

Error: uncaught exception: [Exception... "Component returned failure code: 0x80004003 (NS_ERROR_INVALID_POINTER) [nsIDOMHTMLDivElement.appendChild]" nsresult: "0x80004003 (NS_ERROR_INVALID_POINTER)" location: "JS frame :: http://www.therabbitshome.com/ :: appendPrevNext :: line 955" data: no]

Error: uncaught exception: [Exception... "Component returned failure code: 0x80004003 (NS_ERROR_INVALID_POINTER) [nsIDOMHTMLDivElement.appendChild]" nsresult: "0x80004003 (NS_ERROR_INVALID_POINTER)" location: "JS frame :: http://www.therabbitshome.com/ :: appendZoom :: line 984" data: no]

I've confirmed that the problem exists for FireFox and Chrome users.

The relavent code:

var jPrev=document.createElement("img");
jPrev.src="http://www.therabbitshome.com/images/prev.png";
jPrev.id="prev";
jPrev.onclick=clickPrev;
jPrev.onmouseover=prevMouseover;
jPrev.onmouseout=prevMouseout;
var jNext=document.createElement("img");
jNext.src="http://www.therabbitshome.com/images/next.png";
jNext.id="next";
jNext.onclick=clickNext;
jNext.onmouseover=nextMouseover;
jNext.onmouseout=nextMouseout;

var jZoom=document.createElement("img");
jZoom.src="http://www.therabbitshome.com/images/zoom.png";
jZoom.id="zoom";
jZoom.onclick=clickZoom;
jZoom.onmouseover=zoomMouseover;
jZoom.onmouseout=zoomMouseout;

function openBrowse(){
isBusy=true;
currImg=0;
inContspaceLong();
setTimeout(appendPrevNext,400);
setTimeout(inPrev,400);
setTimeout(inNext,400);
setTimeout(appendZoom,1000);
// setTimeout(appendImg_0,1000);
setTimeout(function(){isBusy=false;},1000);
}

function appendPrevNext(){
var jStuffspace_back=document.getElementById("stuffspace_back");
jStuffspace_back.appendChild(jPrev);
jStuffspace_back.appendChild(jNext);
jStuffspace_back.appendChild(jBlock_prevnext);
}

function appendZoom(){
var jStuffspace_back=document.getElementById("stuffspace_back");
jStuffspace_back.appendChild(jZoom);
}

As you can see, I'm creating, setting the properties for, and appending the "PREV" image, the "NEXT" image, and the magnifying glass image, all the same way. So why is the "PREV" image working and not the others? Help greatly appreciated.

No ideas at all?

Your page isn't loading in my browser, at all.

Oh...wait...it finally came up.

Man, do you have a slow server! Or too much stuff on your page?

Well, the error console says clickPrev is undefined. So once you do jPrev.onclick=clickPrev; you are hosed.

Looking more, clickNext and clickZoom aren't defined either.

I can't seem to even *GET* to your openBrowse() function.

Well, the error console says clickPrev is undefined. So once you do jPrev.onclick=clickPrev; you are hosed.

Yeah, I haven't defined clickPrev yet, that isn't relevant to my problem. My problem is that when the "BROWSE ART" button is clicked, three images should appear, one reading "PREV", one reading "NEXT" and one that looks like a magnifying glass. But as it is, only "PREV" appears.

Looking more, clickNext and clickZoom aren't defined either.

Again, I haven't defined them yet and that has nothing to do with my problem.

I can't seem to even *GET* to your openBrowse() function.

You sure about that? Do you see the image reading "BROWSE ART"? It should appear shortly after the page loads. Clicking that calls clickBrowse which calls openBrowse. I've verified this with three different people.

I'm not sure. When I started it up with a debugger running, naturally it broke on an error on each of those three spots I noted. When I clicked on "BROWSE ART" nothing happened. Even tried setting a breakpoint on openBrowser with no results.

But no matter what I do, it takes so long to load the page that I can fall asleep waiting.

I'll try it once more with FF.

Go figure. Now is loading quite reasonably fast.

And, yes, when you get to the line in question (line 955) jNext is undefined.

So...where do you create jNext?

Okay...you are DEAD WRONG.


>> Looking more, clickNext and clickZoom aren't defined either.
Again, I haven't defined them yet and that has nothing to do with my problem.

Wrong wrong wrong.

When your code gets to the line jPrev.onclick=clickPrev;
IT STOPS WORKING.

NONE of the other inline setup past that point is reached. Specifically, it NEVER GETS to the line
var jNext=document.createElement("img");

So of course you now have NO jNext element in the rest of your code.

COMMENT OUT those three culprit lines and see if I'm not right!

If you put a breakpoint on line 954, for example, and then inspect the properties of jPrev, you find that id DOES NOT HAVE any onmouseover or onmouseout event handlers, for example.

And that's because in *THIS* code
jPrev.src="http://www.therabbitshome.com/images/prev.png";
jPrev.id="prev";
jPrev.onclick=clickPrev;
jPrev.onmouseover=prevMouseover;
jPrev.onmouseout=prevMouseout;

the line in red causes the error and you never REACH the code that sets the onmouseover or onmouseout. And, of course, you also don't get to any of the subsequent lines in that initialization block.

USE A DEBUGGER! It would have told you this hours ago.

I see. I had no idea that code would stop executing when it reaches a function call that's undefined...I just figured it would continue doing whatever it CAN do.

I've tried using a dubugger but I don't understand it because I don't understand anything.

Anyway thanks for the replies. Problem solved.

In general, an error will stop the current *block* of code. With other blocks being unaffected.

But that's a bit too general. An error in a called function will kill the caller as well.

In this case, your "block" was all your initialization, and the initialization therefore stopped at the first error.

I will grant you that it might at first seem strange that JS would barf on
jNext.onclick = someUndefinedFunction;

whereas it is happy with
jNext.onclick = null;
but that may be because we tend to think that something that is undefined *is* null. Not true. There's a real and palpable difference.

Anyway, it really is worth learning to use a debugger. Honest. It might take you a couple of hours to get used to one, but in the long run that will save you many many more hours. Most of the debuggers are pretty much the same: They come built into the browser. The exception is FireBug which you have to install into FireFox. Also, FireBug has a few quirks that are different than the other debuggers. Not major ones, though. I think I prefer it slightly, but any of them are usable.