yazzgoth.org

Well I know… JavaScript is a big quirk in general due to the browser incompatibilities.

When you build an event and attach it to a object in DOM by:

obj.onclick = handlerFunctionName;

and then you have a function declared like this:

function handlerFunctionName(ev)
{
    var element = ev.srcElement ? ev.srcElement: ev.target; // for compatibility between IE and FF
}

IE fails to execute that, where FireFox runs fine.
A quick fix for that is:

function handlerFunctionName(ev)
{
   ev = ev ? ev: event;
   var element = ev.srcElement ? ev.srcElement: ev.target; // for compatibility between IE and FF
}

Variable event is automagically created in IE but it doesn’t exist under FF, while under FF event is passed to the function and under IE it isn’t.

Another bump I’ve hit today was when I tried to selectively remove some images from a form based on their className.
A simple for loop which one may think will work will actually leave behind some of the images that it should remove.
Here is how not to do this:

for(i=0; i< images.length;i++)
{
   if(images[i].className=="deleteMe")
   {
      myForm.removeChild(images[i]);
   }
}

The reason for that is when you remove something from the images array you will skip one place ahead in the for loop iteration.
I’ve found some examples how to remove all child elements, but what I needed was to remove only some, so here is how I did it. It actually loops a bit more times than the previous example, as it’s iterating through all child elements in myForm

var myForm = document.getElementById("myForm");
var i = 0;
while( myForm.childNodes[i])
{
   if(myForm.childNodes[i].className == "deleteMe")
   {
      myForm.removeChild(myForm.childNodes[i]);
   }
   else
   {
      i++;
   }
}