Limiting an element from appearing out of the screen

Question

I'm trying to make a square appear at random positions of the screen. I have set it's position property to be absolute and in javascript i'm running a random number between 0 to 100, this will then be assigned as a percentage to top and left property. however if the random number was ~100 or a bit less the square will appear out of the screen. How do I fix this problem?

var shape1 = document.getElementById("shape1");

//creating random number to 100
        function randomNum() {
            var r = Math.random();
            var y = (r * (100 - 0 + 1)) + 0;
            var x = Math.floor(y);
            console.log(x);
            return x;
        }
    //reappear at random position
        function reappear(object) {
        object.style.left = randomNum().toString() + "%";
        object.style.top = randomNum().toString() + "%";
        object.style.display = "block";
        }

reappear(shape1);

code: https://jsfiddle.net/y3m4ygow/1/

Answer 1

As you can see what's happening here is sometimes the object falling out of the document because (the width or height of it + the randomized percentage) is more than document width or height.

For example, say that document width is 1000px and the random number turned out to be 90% (=900px), since the box width is 200px, so you will have 100px out of the screen.

Now you have two solutions:

First: As @Sidd noted, you can check whether the box is in or out using getBoundingClientRect this will return a variable for you having two properties one is bottom which is the distance of the box from the upper edge of the document, the other property is height which is the distance of the box from the left border of the screen.
Now what you can do is compare those two values with the document width and height.

Now by adding those three lines you'll have your problem solved:

var rect = object.getBoundingClientRect(); // getting the properties

if(rect.right  > window.innerWidth         // comparing width
|| rect.bottom > window.innerHeight)       // comparing height
     {reappear(object);}                   // re-randomizing

https://jsfiddle.net/y3m4ygow/2/
this WILL work, but it might produce some flickering with some browsers, and i'm not very comfortable about calling a function inside itself.

Second Solution is: which is what I would prefer you to do, is by not using a percentage, but using a fixed height and width values.
you can get the current height and weight values from the window object and substract your box dimensions from it:
var cHeight = window.innerHeight - 200;
var cWidth = window.innerWidth - 200;
set those two as the maximum value for the top and the right.

function topRandomNum() { var r = Math.random(); var y = (r * (cHeight - 0 + 1)) + 0; var x = Math.floor(y); return x; }
function rightRandomNum() { var r = Math.random(); var y = (r * (cWidth - 0 + 1)) + 0; var x = Math.floor(y); return x; }

and here's the fiddle for the second solution: https://jsfiddle.net/uL24u0e4/