CODEWITHSUNDEEP
javascript
John Stimac
John Stimac

Reputation: 5493

This javascript fails on mouseover

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>");
}

Upvotes: 1

Views: 259

Answers (2)

Marc B
Marc B

Reputation: 360662

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.

Upvotes: 2

atk
atk

Reputation: 9314

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

Upvotes: 1

Related Questions