CODEWITHSUNDEEP
javascripthtmlposition
Statty
Statty

Reputation: 25

How to update position of div with javascript

This is my first time posting here so I hope I'm doing it right. I appreciate any help I can get.

I am trying to update the position of a div using a Javascript function that, when called by the click of a button, calculates random numbers and then uses these numbers to change the position of the div. Unfortunately, clicking the button does not change the position of the div.

This is my HTML:

<body>

<p>Want to see something cool?</p>
<button id = "funbutton" onclick="SeeWhatHappens()">Click here!</button>

<div id = "newdiv" class="a"></div>

</body>

And this is my Javascript function:

function SeeWhatHappens() {
var numRand = Math.floor(Math.random() * 501);
var divsize = 50;
var posx = (Math.random() * document.width() - divsize).toFixed();
var posy = (Math.random() * document.height() - divsize).toFixed();
var div = document.getElementById('newdiv');
div.style.left = posx;
div.style.top = posy;
}

Here is my full code: http://jsfiddle.net/6hnLx6qc/

What am I doing wrong?

Upvotes: 2

Views: 3110

Answers (2)

Samuel Goodell
Samuel Goodell

Reputation: 630

You had some issues with getting the width and height of the document. I switched it to use window.innerHeight and .innerWidth instead.

http://jsfiddle.net/6hnLx6qc/8/

Upvotes: 0

dfsq
dfsq

Reputation: 193271

You have two problems. The first one is that there is no such methods width and height on document object. You can use window.innerWidth/innerHeight instead. And the second one, you need to use px units for style.left/top values:

function SeeWhatHappens() {
    var numRand = Math.floor(Math.random() * 501);
    var divsize = 50;
    var posx = (Math.random() * window.innerWidth - divsize).toFixed();
    var posy = (Math.random() * window.innerHeight - divsize).toFixed();
    var div = document.getElementById('newdiv');
    div.style.left = posx + 'px';
    div.style.top = posy + 'px';
}

Demo: http://jsfiddle.net/6hnLx6qc/7/

Upvotes: 4

Related Questions