Returning randomized variable data javascript

Question

Basically i have managed to randomized 2 variable's value with this codes:

function getRandomPosition()
{
var xx = document.body.clientWidth;
var yy = document.body.clientHeight;
var randomY = Math.floor(Math.random()*yy);
var randomX = Math.floor(Math.random()*xx);
}

This is working fine. Next i made a image random using this randomized coordinates.

function randomly()
{
var yx = getRandomPosition(img);
img.style.top = yx[0];
img.style.left = yx[1];
return[yx];
}

Next i want to constantly monitor the position of the mouse and the position of the image.

function plswork()
{
var yxx=getRandomPosition();
if((event.clientX < yxx[1]-210)||event.clientX>yxx[1]+340) //only comparing the x axis~~ etcetc
{ //play an audio track
}
}

document.onmousemove= plswork;//when mouse move, run that function. 

HOWEVER, the problem i have now is that the image is spawning everywhere once i move the mouse as well. And if i call the getRandomPosition(); function it will run itself again and give me a different set of numbers to check with the mouse. Can anyone give me suggestions? or help thanks

My target is to check the mouse position and compare it to the randomized location that the image is spawned in. The 'yx' in function randomly() tells me the coordinates of the location the image is spawned in. So to bring this function over i have to return it, but when i do that in function plswork(), whenever i move my mouse, it will call and execute the entire function spawning images randomly... BUT, if i call the function getRandomPosition() to replace the var yx in function plswork(), im comparing a different set of coordinates from the 'yx' in the function randomly()..

Answer 1

Not sure what you're trying to do here exactly, but I'll try to help. To start, declare your image position yx outside of randomly() so you can access it within plswork()

function getRandomPosition(){...}

var yx = null;
function randomly()
{
  yx = getRandomPosition();
  img.style.top = yx[0];
  img.style.left = yx[1];
}

function plswork()
{
  if((event.clientX < yx[1]-210)||event.clientX>yx[1]+340)
  { //play an audio track
  }
}
document.onmousemove= plswork;//when mouse move, run that function.

Answer 2

A number of basic things are missing from your Javascript: the function getRandomPosition() declares only local variables and doesn't return any value for other parts of the program to use; the function getRandomPosition() is called with the parameter img, but no parameter is taken by getRandomPosition(); CSS Styles top and width are set without "px"; you're calling getRandomPosition() again, expecting to get the same values, instead of storing them the first time...

Anyway, here's a quick example of a script that places an image at a random position and then does something (in this case: move the image) when the mouse gets within a certain distance from the image. Have a good look and check the differences with your original script.

I'm using doStuff.pos as a way to store a static variable pos in the function doStuff(); this way, the variable holds its value between repeated calls to the function. (Other people may prefer using a global variable declared outside the function.)

function getRandomPosition() {
    var maxX = document.body.clientWidth - 32;
    var maxY = document.body.clientHeight - 32;
    var rndX = Math.floor(Math.random() * maxX);
    var rndY = Math.floor(Math.random() * maxY);
    return {x: rndX, y: rndY};
}
function randomizeImage() {
    var pos = getRandomPosition();
    var img = document.getElementById("image");
    img.style.left = pos.x + "px";
    img.style.top = pos.y + "px";
    return pos;
}
function doStuff() {
    if (!event) doStuff.pos = randomizeImage();
    else if (event.clientX < doStuff.pos.x + 96 
          && event.clientX > doStuff.pos.x - 64
          && event.clientY < doStuff.pos.y + 96
          && event.clientY > doStuff.pos.y - 64) {
        doStuff.pos = randomizeImage(); // or do other stuff here
    }
}
doStuff(); // call first time without event
document.addEventListener("mousemove", doStuff)

BODY {min-height: 218px; margin: 0; border: 1px solid #CCC;}
IMG {position: relative; width: 32px; height: 32px;}

<img id="image" src="https://www.gravatar.com/avatar/ebdcdc75fd352485e37d13c2d7526372?s=32&d=identicon&r=PG&f=1" />

Or, if you don't mind using global variables:

var posX, posY; // global variables

function getRandomPosition() {
    var maxX = document.body.clientWidth - 32;
    var maxY = document.body.clientHeight - 32;
    posX = Math.floor(Math.random() * maxX);
    posY = Math.floor(Math.random() * maxY);
}
function randomizeImage() {
    getRandomPosition();
    var img = document.getElementById("image");
    img.style.left = posX + "px";
    img.style.top = posY + "px";
}
function doStuff() {
    if (event.clientX < posX + 96 
    &&  event.clientX > posX - 64
    &&  event.clientY < posY + 96
    &&  event.clientY > posY - 64) {
        randomizeImage(); // or do other stuff here
    }
}
randomizeImage(); // initialize position
document.addEventListener("mousemove", doStuff)

BODY {min-height: 218px; margin: 0; border: 1px solid #CCC;}
IMG {position: relative; width: 32px; height: 32px;}

<img id="image" src="https://www.gravatar.com/avatar/ebdcdc75fd352485e37d13c2d7526372?s=32&d=identicon&r=PG&f=1" />

You could also use closures for this, but they're less straightforward to explain and understand. Basically, the function doStuff() is defined inside the function randomizeImage(), and therefor it has access to the variables declared in randomizeImage(). Check this question for more information.

function randomizeImage() {
    var img = document.getElementById("image");
    var maxX = document.body.clientWidth - 32;
    var maxY = document.body.clientHeight - 32;
    var posX = Math.floor(Math.random() * maxX);
    var posY = Math.floor(Math.random() * maxY);
    img.style.left = posX + "px";
    img.style.top = posY + "px";

    function doStuff() {
        if (event.clientX < posX + 96 && event.clientX > posX - 64
        &&  event.clientY < posY + 96 && event.clientY > posY - 64) {
            img.classList.add("mousenear");
        } else {
            img.classList.remove("mousenear");
        }
    }
    return doStuff;
}

var myFunc = randomizeImage();                  // randomizeImage() returns doStuff()
document.addEventListener("mousemove", myFunc); // so doStuff() is called

BODY {min-height: 218px; margin: 0; border: 1px solid #CCC;}
IMG {position: relative; width: 32px; height: 32px;}
.mousenear {-webkit-transform: rotate(45deg); transform: rotate(45deg);}

<img id="image" src="https://www.gravatar.com/avatar/ebdcdc75fd352485e37d13c2d7526372?s=32&d=identicon&r=PG&f=1" />