I made a circle that moves to a random point on the screen after a page refresh. But the problem is that I need it to work without refreshing the page and only after clicking on the circle. There was also a problem with the circle going off the screen. That is, the circle sometimes appears outside the screen

I wrote the following code:

let elem = document.querySelector('button');
let randX = Math.random();
let randY = Math.random();
let randXMult = randX * 100;
let randXP = randXMult   "%";
let randYMult = randY * 100;
let randYP = randYMult   "%";

elem.style.left = randYP;
elem.style.top = randXP;

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  border: none;
  box-sizing: border-box;
}

body main html {
  width: 100%;
  height: 100%;
  position: relative;
}

button {
  width: 200px;
  height: 200px;
  border-radius: 100%;
  background: rgb(167, 163, 163);
  position: absolute;
}

<main>
  <button></button>
</main>

CodePudding user response：

You can use a function to do that

I test this code and click it over 100 times

let elem = document.querySelector('button');

const changePosition = () => {
  let randX = Math.random();
  let randY = Math.random();
  const circleSize = {
    width: elem.clientWidth,
    heigth: elem.clientHeight
  };

  const windowWidth = window.innerWidth - circleSize.width;
  const windowheigth = window.innerHeight - circleSize.heigth;

  let randXMult = windowheigth * randX;
  let randXP = randXMult   'px';
  let randYMult = windowWidth * randY;
  let randYP = randYMult   'px';


  elem.style.left = randYP;
  elem.style.top = randXP;
};

elem.addEventListener('click', changePosition);

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  border: none;
  box-sizing: border-box;
}

body main html {
  width: 100%;
  height: 100%;
  position: relative;
}

button {
  width: 200px;
  height: 200px;
  border-radius: 100%;
  background: rgb(167, 163, 163);
  position: absolute;
}

<main>
  <button></button>
</main>

CodePudding user response：

try below code,

1. onclick circle
2. without page refresh
3. vertical page boundary

 document.querySelector('button').onclick = function() {
  test();
};
 function test()
 { 
  let elem = document.querySelector('button');
  let randX = Math.random();
  let randY = Math.random();
  let randXMult = randX * 100;
  
  let randXP = randXMult   "%";
  console.log(randXMult / 70 >1);
  if(randXMult / 70 >1)
  {
    randXMult = 1;
    randXP = randXMult   "%";
  }
  let randYMult = randY * 100;
  console.log(randYMult);
  let randYP = randYMult   "%";
  
  elem.style.left = randYP;
  elem.style.top = randXP;
 }

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  border: none;
  box-sizing: border-box;
}


body main html {
  width: 100%;
  height: 100%;
  position: relative;
}

button {
  width: 200px;
  height: 200px;
  border-radius: 100%;
  background: rgb(167, 163, 163);
  position: absolute;
}

<main>
  <button></button>
</main>