Dynamic event handlers...

[MinusMyThoughts]

Hey, all!I'm having a particularly confusing problem when trying to create onclick handlers on the fly.My code works like so:

function mainFunc(p1,p2,p3,p4) {  // Image number variables. Used as id attribute.	var newimg = 1;  // There are a bunch of functions called here  // that create new <img> tags.	createImgHTML(newimg);	someOtherFunc(p2);	. . .  // Then, I try to assign an "onclick" handler  // to one of my new <img> tags.	document.getElementById(newimg).onclick = extFunc;}function extFunc() {  // This calls mainFunc() with new parameters	mainFunc(this.id,p2,p3,p4);}

This doesn't work, and I'm not sure why. All of the documentation I'm reading appears to be reinforcing my belief that this is valid, so I'm guessing there's something small I'm just overlooking.Any guidance is greatly appreciated. Thanks in advance!-Jason

[Jesdisciple]

Have you made sure mainFunc is running? Does the browser complain of any errors? Is extFunc running?

[MinusMyThoughts]

mainFunc is running. Every action is firing properly except the onclick handler, including a call to change the innerHTML of a test span. So, the function isn't crashing. And, all that extFunc does is call mainFunc.To make sure that I wasn't doing something wrong with the external function, I tried an anonymous function:

	  $("testing").onclick = function() { this.style.color = '#F00' }	  $("testing").innerHTML = 'Nothing crashed yet...';

$ is a shortcut function for "document.getElementById", and "testing" is a <span> with attributes of an id and in-line style declarations.When I run this function, "testing" changes to say "Nothing crashed yet...", but when I click on it, it stays white, which is the default color.I ran similar tests for onmouseover to no avail.Any ideas?-Jason

[Jesdisciple]

So no error is being thrown?Could you link to the page? This is pretty weird...

[MinusMyThoughts]

It's behind a basic auth so that it doesn't get indexed.URL: http://bluspasinc.ennuidesign.comUser: betatesterPass: secretThe problem is happening on the "Portfolio" page when you click the "left" link. All the javascript I'm using resides in an external file located at _style/page.coverflow.jsLet me know if I can explain anything else to help, because I'm stumped...-Jason

[MinusMyThoughts]

Also, I'm using FF3, and have not tested in any other browsers yet. If you're using another browser, it may explode. -Jason

[Jesdisciple]

What portfolio page? The only links that work at all for me are the contact links, and I think they're broken. (I'm using FF3 on Ubuntu Linux.)EDIT: My bad. The text links work; I thought they were all one link. Still testing.

[MinusMyThoughts]

Ok. That was silly.Fixed, and it's now running error-free, but without any further success.I'm really stumped, here.-Jason

[Jesdisciple]

You're right; see my edit.

Error: exit is not definedSource File: http://bluspasinc.ennuidesign.com/_scripts/page.coverflow.jsLine: 14, 69, 97

(No, not all those line numbers were present originally. Triplicate errors were thrown so I merged them.)

[MinusMyThoughts]

Ok. That was silly.Fixed, and it's now running error-free, but without any further success.I'm really stumped, here.-Jason

[Jesdisciple]

Is there anything wrong with the below behavior, or are you not experiencing this?

1. I click "left", a new image rotates into view, and "feedback" changes to "Things are happening".
2. I click "Things are happening" and it turns from white to red. Then it unnecessarily runs the first function.

[MinusMyThoughts]

It would appear that something is wrong with my computer/operating system. I've fired up FF3 and Safari, and on both, I'm unable to get the text to turn red when I click on it.Do you know of any issues with Mac OSX that could be causing this wackiness?Thanks for verifying that the code technically works, though. I might have driven myself completely insane otherwise.-Jason

[Jesdisciple]

No; I run Linux, but Deirdre's Dad is on a Mac. If he doesn't show up here on his own, you might want to nudge him via PM.

[jesh]

I stumbled upon this article at A List Apart a few days ago. It might help with your situation:http://www.alistapart.com/articles/getoutbindingsituations

[Jesdisciple]

Unless the Mac implementation of Firefox has a bug, that shouldn't be a problem here. But I can't think of any other exaplanation.Jason, change the onclick function to this and report the alert message so we can know for sure:

$("testing").onclick = function() { alert(this); this.style.color = '#F00'; }

If that alerts

• "[object Window]", see https://developer.mozilla.org/en/Bug_writing_guidelines and use this function instead:

  $("testing").onclick = function() { $("testing").style.color = '#F00'; }

• "[object HTMLSpanElement]", we need to look for another problem
• anything else, that's weird and we need to think harder.

[jeffman]

FWIW, I'm unaware of any OS 10.5x or 10.4x errors that would do this. But I'm also not seeing any red.

[MinusMyThoughts]

Thanks for the article link, Jesh! I read it over, but I eliminated binding from the function altogether, and it's still acting up.The current code that's running is:

  function left (imgnum,newx,newsize,speed) {	// Left thumb handling	  leftimg = Math.round(imgnum)-1;	  fadeout(leftimg);	// Main image handling	  mainimg = Math.round(imgnum);	  moveLeft(mainimg,newx); // move the image left	  shrink(mainimg,newsize,speed); // shrink the image	// Right thumb handling	  rightimg = Math.round(imgnum)+1;	  moveLeft(rightimg,150); // move to center	  grow(rightimg,520,speed); // grow to main display size	// Create a new thumbnail	  nextimg = Math.round(rightimg)+1;	  nextImg(nextimg); // AJAX call to generate a new thumbnail that fades in at right	// Set the new event handlers	  $("testing").innerHTML = 'Things are happening';	  $("testing").onclick = function() { alert(this); $("testing").innerHTML += ' Click.'; }  }

I'm not getting an alert, but every other action executes, all without any errors reported. Sheesh...-Jason

[Jesdisciple]

Have you tried testing this in Safari and Opera? That would help to diagnose whether this problem is with Macs in general or just Firefox on Macs.EDIT: I've just reproduced this problem in Opera, so any test in Opera on a Mac would return an invalid result for our purposes. (If it worked, that would help to diagnose Opera's problem but not Firefox's.)

[MinusMyThoughts]

Safari and Opera deliver identical results.Are you getting the alert on Linux?-Jason

[Jesdisciple]

Yes, I get the alert - but not in Opera.

[MinusMyThoughts]

Hey! I think I fixed it!So, I was just staring at the code, and I started getting upset at all the inline CSS, which reminded me that all of my JS was failing before I declared it inline.Then, my Eureka! moment: I declared 'onclick="return false;"' on my testing span, and, hey! It works!Here is what I started with:

<span id="testing" style="position:absolute;top:0px;left:550px;color:#FFF;">feedback</span>

When I changed that to:

<span id="testing" onclick="return false;" style="position:absolute;top:0px;left:550px;color:#FFF;">feedback</span>

The alert fired, as well as the call to add text.Is there a workaround for that? I hate all the inline style and other miscellaneous crap I'm having to put in this code, and I'm dreading a future rework with the way it's looking right now...Thanks so much for all your help, guys! I really appreciate it.-Jason

[MinusMyThoughts]

Hey! I think I fixed it!So, I was just staring at the code, and I started getting upset at all the inline CSS, which reminded me that all of my JS was failing before I declared it inline.Then, my Eureka! moment: I declared 'onclick="return false;"' on my testing span, and, hey! It works!Here is what I started with:

<span id="testing" style="position:absolute;top:0px;left:550px;color:#FFF;">feedback</span>

When I changed that to:

<span id="testing" onclick="return false;" style="position:absolute;top:0px;left:550px;color:#FFF;">feedback</span>

The alert fired, as well as the call to add text.Is there a workaround for that? I hate all the inline style and other miscellaneous crap I'm having to put in this code, and I'm dreading a future rework with the way it's looking right now...Thanks so much for all your help, guys! I really appreciate it.-Jason

[Jesdisciple]

Does it work in Opera and Safari for you? I can't get it in Opera.Do you know if this is a problem with all event handlers or just onclick? It really needs to be reported to Mozilla.

[MinusMyThoughts]

So, when I said earlier that I'd fixed the problem, turns out I was wrong.When I came back from dinner, I reloaded the page and tried to run the same friggin' code, it presented the same problem I was having before.After a whole lot of heartache, I decided to try the DOM 2 model and used addEventListener. I've now tested in Opera, FF3, and Safari, all with success.Here's the working code:

  function handleEvent(imgnum) {	// Set the new event handlers	  ctrImg = Math.round(imgnum-1);	  $(imgnum).addEventListener("click",function() { left(ctrImg,10,140,2) },false);  }

Thanks again for all the help I received on this.-Jason