html5 - Returning randomized variable data javascript -

basically have managed randomized 2 variable's value 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 working fine. next made image random using randomized coordinates.

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

next want monitor position of mouse , position of image.

function plswork() { var yxx=getrandomposition(); if((event.clientx < yxx[1]-210)||event.clientx>yxx[1]+340) //only comparing x axis~~ etcetc { //play audio track } }  document.onmousemove= plswork;//when mouse move, run function.  

however, problem have image spawning everywhere once move mouse well. , if call getrandomposition(); function run again , give me different set of numbers check mouse. can give me suggestions? or thanks

my target check mouse position , compare randomized location image spawned in. 'yx' in function randomly() tells me coordinates of location image spawned in. bring function on have return it, when in function plswork(), whenever move mouse, call , execute entire function spawning images randomly... but, if call function getrandomposition() replace var yx in function plswork(), im comparing different set of coordinates 'yx' in function randomly()..

a number of basic things missing javascript: function getrandomposition() declares local variables , doesn't return value other parts of program use; function getrandomposition() called parameter img, no parameter taken getrandomposition(); css styles top , width set without "px"; you're calling getrandomposition() again, expecting same values, instead of storing them first time...

anyway, here's quick example of script places image @ random position , (in case: move image) when mouse gets within distance image. have , check differences original script.

i'm using dostuff.pos way store static variable pos in function dostuff(); way, variable holds value between repeated calls function. (other people may prefer using global variable declared outside 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 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 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 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 use closures this, they're less straightforward explain , understand. basically, function dostuff() defined inside function randomizeimage(), , therefor has access variables declared in randomizeimage(). check this question 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); // dostuff() 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" />