CODEWITHSUNDEEP
javascripthtmlcss
PresidentNick
PresidentNick

Reputation: 98

Inline css not being set on button

I'm trying to make a button that moves around the screen everytime you hover over it, the up and down motion works, but the left and right doesn't. The button just moves vertically when I want it to move both ways. Code in question:

<input type="button" value="Other button" id="otherbutton" style="position: absolute; top:  100px; left: 10px;" 
onmouseover="style.top= Math.floor((Math.random()*500)+1) + 'px'" 
onmouseover="style.left= Math.floor((Math.random()*500+1) + 'px'">

Upvotes: 1

Views: 76

Answers (4)

Wagner Leonardi
Wagner Leonardi

Reputation: 4446

You can't have same properties twice, set all only in one "onmouseover" property.

<input type="button" value="Other button" id="otherbutton" style="position: absolute; top:  100px; left: 10px;"  onmouseover="style.top= Math.floor((Math.random()*500)+1) + 'px'; style.left= Math.floor((Math.random()*500)+1) + 'px'">

you separe multiple javascript lines with ";" in a same property

Upvotes: 0

suff trek
suff trek

Reputation: 39767

Don't use 2 mouseover handlers - combine them into one:

<input type="button" value="Other button" id="otherbutton" style="position: absolute; top: 100px; left: 10px;" onmouseover="this.style.top= Math.floor((Math.random()*500)+1) + 'px'; this.style.left= Math.floor((Math.random()*500)+1) + 'px'">

Demo: http://jsfiddle.net/msGnh/

Upvotes: 0

Space Age Crystal
Space Age Crystal

Reputation: 404

Combine the two into one mouseover. Additionally, you are missing a closing ) in the second mouseover:

<input type="button" value="Other button" id="otherbutton" style="position: absolute; top:  100px; left: 10px;" 
onmouseover="style.top= Math.floor((Math.random()*500)+1) + 'px'; style.left= Math.floor((Math.random()*500)+1) + 'px'">

Here's a jsFiddle.

Upvotes: 1

Rakesh K
Rakesh K

Reputation: 712

Try This

<script type="text/javascript">
    function move( element ) {
       element.style.top = Math.floor((Math.random()*500)+1) + 'px';
       element.style.left = Math.floor((Math.random()*500)+1) + 'px';
    }
</script>

OR

 <input type="button" value="Other button" id="otherbutton" style="position: absolute; top:  100px; left: 10px;" onmouseover="this.style.top= Math.floor((Math.random()*500)+1) + 'px';this.style.left= Math.floor((Math.random()*500)+1) + 'px'" >

Upvotes: 0

Related Questions