I’ve been doing some research here for enjoyment to learn JavaScript. I’ve been Googling to find an answer to this, but have had no luck. It could be that I’m a bit of an amateur and don’t know the proper terms to search for, but maybe somebody can steer me in the right direction or help me out. 

Anyway, I’m looking for a way to get a div to sit in the center and to randomly move around a page with each radio button. Like, the div is one color and one clicks the first radio button and it will move a little bit from the center, then the middle radio button one will move more, but the last radio button will move very far. 

Starting point obvious is the ‘center’ of the page and the ending point does not matter. It just needs to move random at each button pressed. 

I’ve got decent HTML and CSS skills, very basic JS skills, and some experience implementing JQuery. Ideally, I’d like to figure this out as the library and the two texts that I have are no help.

Here is what I have so far.

Thanks in advance!!!

```
 <html>
<head>
<style>

div.a {
width: 50px;
height:50px;
background-color:red;
margin:0px;

}
</style>

<script>

 function showStyle() {
     //alert(" ss " );
     var id = document.getElementById("div1");
     var str = "";

     str = str + "position: " + id.style.position + ";";
     str += "<br>top: " + id.style.top;
     str += "<br>left: " + id.style.left;
     str += "<br>width: " + id.style.width;
     str += "<br>height: " + id.style.height;
     document.getElementById("para").innerHTML = str;
     }

function myFunction(){
    var x= document.getElementById("smallRadio");
    x.checked = true;  } 
    function smallRadio() {
    var id = document.getElementById("div1");
    id.style.top = (parseInt(id.style.top) + 50) + "px";
      }

function myFunction(){
    var x= document.getElementById("mediumRadio");
    x.checked = true;  } 
    function smallRadio() {
    var id = document.getElementById("div1");
    id.style.top = (parseInt(id.style.top) + 50) + "px";
      }

function myFunction(){
    var x= document.getElementById("largeRadio");
    x.checked = true;  } 
    function smallRadio() {
    var id = document.getElementById("div1");
    id.style.top = (parseInt(id.style.top) + 50) + "px";
      }

$(document).ready(function(){
    animateDiv();

});

function makeNewPosition(){

    var h = $(window).height() - 50;
    var w = $(window).width() - 50;

    var nh = Math.floor(Math.random() * h);
    var nw = Math.floor(Math.random() * w);

    return [nh,nw];    

}

function animateDiv(){
    var newq = makeNewPosition();
    $('.a').animate({ top: newq[0], left: newq[1] }, function(){
      animateDiv();        
    });

};

</script>
</head>

<body>
<h3>Click</h3>
Small Leap: <input type="radio" id="smallRadio"><br>
Medium Leap: <input type="radio" id="mediumRadio"><br>
Big Leap: <input type="radio" id="largeRadio"><br>

<button onclick="myFunction()">Click!</button>

<div class='a'></div>

```