Moving a div to a new location with buttons and mouseover using math.random

I'm new to JavaScript and trying to pick up on a new skill in my free-time. I'm confused on why this "div" is not wanting to move right.

Basically what I'm trying to do is have a div and three buttons. With each button, the jump/delta is changed and would randomly move around the screen with using mouseover. I've gotten the div to move in one direction, but not all over the screen. I do not care if the div moves off the screen.

Here is what I have so far. What am I doing wrong here?

function moveDiv() {
            var delta; var pos;
            var id = document.getElementById("moving");
            if(document.getElementById("small").checked===true) {
            delta = 20;
            var pos = Math.floor (Math.random() * delta) - (delta/2);
                }

            else if(document.getElementById("medium").checked===true) {
            delta = 90; 
            var pos = Math.floor (Math.random() * delta) - (delta/2); 
                 } 

            else if(document.getElementById("large").checked===true) {
            delta = 200; 
            pos = Math.floor(Math.random() * delta) - (delta/2);

                }


            var left = parseInt(id.style.left) + pos;                   
            id.style.left = left + "px";
            var top = parseInt(id.style.top) + pos;
            id.style.top = top + "px"; 

             }
</script>



<form>
Small <input type="radio" name="jump" value="large" id="small">
Medium <input type="radio" name="jump" value="medium" id="medium">
Large <input type="radio" name="jump" value="large" id="large">
</form>

<div id="moving" onmouseover="moveDiv();" style="position:relative; left:25px; top:300px; 
background-color: red;  width:200px; height:200px;"></div>