This javascript fails on mouseover

Question

can anyone figure out why this JavaScript won't work? It correctly generates the document.write output, but when you try to drag it it starts complaining about top and left not being set. any idea whats wrong?

abilitynames=new Array('Heal','Slash','Stab','Poison Slash','Knockout','','','','Tornado','','','','','','','','Icespike','','','','','','','','Bolt','Jumping Bolt','','','','','','','Roast','Burn','','','','','','','Earthquake','Rockwall','','','','','','','Kill','Deflect','Anti-Heal','','','','','','Backslash','Darkwall','Steal','Take','','','','');
abilitytypes=new Array(3,1,1,1,1,2,2,2,1,2,2,2,2,2,2,2,1,2,2,2,2,2,2,2,1,1,2,2,2,2,2,2,1,1,2,2,2,2,2,2,1,2,2,2,2,2,2,2,1,2,3,2,2,2,2,2,1,2,3,3,2,2,2,2);
abilitycolors=new Array('#00FF00','#FFFFFF','#0000FF','#FFFF00','#FF0000','#AD6C00','#AD00FF','#000000');
for(i=0;i<64;i++){
document.write("<div onmousedown='dragging=this.id;this.style.position=\"fixed\";this.style.zIndex=1000;this.style.left=event.clientX-75;this.style.top=event.clientY-15;' onmouseout='if(dragging===this.id){this.style.left=event.clientX-75;this.style.top=event.clientY-15;}' onmousemove='if(dragging===this.id){this.style.left=event.clientX-75;this.style.top=event.clientY-15;}' onmouseup='dragging=false;if(event.clientX<450||event.clientY>"+(180+(abilitytypes[i]*90))+"||event.clientY<"+(100+((abilitytypes[i]-1)*(90*abilitytypes[i])/((4%abilitytypes[i])+1)))+"){this.style.position=\"relative\";this.style.top=0;this.style.left=0;this.style.zIndex=0;}else{this.style.left=460;this.style.top=(Math.round((event.clientY-30)/45)*45)+15;if(abilitys[Math.round((event.clientY-120)/45)]!=\"\"&&abilitys[Math.round((event.clientY-120)/45)]!=this.id){document.getElementById(abilitys[Math.round((event.clientY-120)/45)]).style.position=\"relative\";document.getElementById(abilitys[Math.round((event.clientY-120)/45)]).style.left=0;document.getElementById(abilitys[Math.round((event.clientY-120)/45)]).style.top=0;}abilitys[Math.round((event.clientY-120)/45)]=this.id;alert(abilitys);}' id='"+i+"' class='abilityblock"+abilitytypes[i]+"'><div class='abilityicon' style='background-position:"+(Math.floor(i/8)*-20)+"px "+((i%8)*-20)+"px;'></div><div class='abilityname' style='color:"+abilitycolors[Math.floor(i/8)]+";'>"+abilitynames[i]+"</div></div>");
}

Answer 1

Searching your code, you haven't defined an onmouseover event. You define onmousedown, onmouseout, onmousemove, and onmouseup. No onmouseover.

Answer 2

I've probably broken the script just TRYING to clean up this unholy mess and simplifying things a little, but at least it seems to be a bit more readable now (not including the array definitions):

<script type="text/javascript">

var dragging;

function mouseDown(el) {
    dragging = el.id;
    el.style.position = "fixed";
    el.style.zIndex = 1000;
    el.style.left = event.clientX - 75;
    el.style.top = event.clientY-15;
}

function mouseOut(el) {
    if (dragging === el.id) {
        el.style.left = event.clientX - 75;
        el.style.top = event.clientY - 15;
    }
}

function mouseMove(el) {
    if (dragging === el.id) { 
        el.style.left = event.clientX - 75;
        el.style.top = event.clientY - 15;
    }
}

function mouseUp(el, i) {
    dragging = false;
    if (    (event.clientX < 450) ||
            (event.clientY > (180 + (abilitytypes[i] * 90)) ) ||
            (event.clientY < (100 + (abilitytypes[i] - 1) * (90 * abilitytypes[i]) / ((4 % abilitytypes[i]) + 1)))) {
        el.style.position = "relative";
        el.style.top = 0;
        el.style.left = 0;
        el.style.zIndex = 0;
    } else {
        el.style.left = 460;
        el.style.top = (Math.round((event.clientY - 30) / 45) * 45) + 15;
        if ((abilitys[Math.round((event.clientY - 120) / 45)] != "") && (abilitys[Math.round((event.clientY - 120) / 45)] != el.id)) {
            var subel = document.getElementById(abilitys[Math.round((event.clientY-120)/45)]);
            subel.style.position="relative";
            subel.style.left=0; 
            subel.style.top=0;
        }
        abilitys[Math.round((event.clientY - 120) / 45)] = el.id;
        alert(abilitys);
    }       
}

    for(var i = 0; i < 64; i++){                                                                                                           
       document.write("               
    <div onmousedown='mouseDown(this);'
        onmouseout='mouseOut(this);'
        onmousemove='mouseMove(el);'
        onmouseup='mouseUp(this, i);'
        id='"+i+"'
        class='abilityblock"+abilitytypes[i]+"'>
        <div class='abilityicon' style='background-position:"+(Math.floor(i/8)*-20)+"px "+((i%8)*-20)+"px;'></div>
        <div class='abilityname' style='color:"+abilitycolors[Math.floor(i/8)]+";'>"+abilitynames[i]+"</div>                           
    </div>");
}
</script>

Phew. And after all that, I'm guessing your missing 'left' and 'top' parameters are because your dynamically computed element IDs are generating non-existent IDs in the mouseup handler.

My suggestion? Scrap this home-brew drag 'n drop stuff and use the functionality provided by Mootools or jQuery. Far less trouble, especially when having to deal with cross-browser differences.