Trying to figure out how to randomly generate a position within an HTML div. I've come up with a JavaScript function that looks like this:
function randomInRange(min, max) {
return(Math.floor((Math.random() * (max - min) + 1) + min));
}
My goal is to change the CSS of the div by setting random values for the left and top attributes (position:relative; left:0px; top:0px). The challenge lies in determining the appropriate min and max values for the function since the div uses percentage widths.
CSS of the div:
#stage {
float: left;
background-color: pink;
width: 100%;
height: 70%;
}
The function should trigger when a specific button is clicked
var button = document.getElementById("button");
button.onclick = function () {
shape.style.left = randomInRange(0, stage.style.width);
shape.style.top = randomInRange(0, stage.style.height);
}
//The shape represents a circle div indicating the generated point
I've recently started learning JavaScript and am struggling to find a solution