I was tinkering with this DHTML code, trying to practice and learn, but for some reason it won't work. It's IE-specific, and in it the button's supposed to move to a random location whenever you mouse over, and if you ever manage to click it, the text changes to congratulate you.
------------------------------------------
moving_button.html
------------------------------------------
<HTML>
<HEAD>
<STYLE>
#text {font-family:Arial, Helvetica, sans-serif; font-size:14pt; text-align:center}
#button {position:absolute; left:200px; top:200px}
</STYLE>
<SCRIPT SRC="button_move.js"></SCRIPT>
</HEAD>
<BODY>
<DIV ID=text>Click the button!</DIV>
<FORM NAME=EXAMPLE>
<SPAN ID=button>
<BUTTON TYPE=BUTTON onMouseOver="moveButton();" onClick="congrats();">Click me!</BUTTON>
</SPAN>
</FORM>
</BODY>
</HTML>
=================================
button_move.js
-------------------------------------------
var mouseOverYet=false;
function moveButton() {
if(!(mouseOverYet)) {
taunt();
mouseOverYet = true;
}
var x = Math.random() * 620;
var y = Math.random() * 400;
x = Math.floor(x);
y = Math.floor(y);
button.style.pixelLeft = x;
button.style.pixelTop = y;
}
function taunt() {
text.innerText="HAHA!!";
text.style.fontSize=24px;
}
function congrats() {
text.innerText='Wow! You actually clicked it? Congrats!';
}
=================================
When I put alerts into either event handler, they appear. However, when I put an alert in the moveButton() function, it doesn't appear.
Any help would be greatly appreciated
Bookmarks