javascript - How to make button randomly change position when clicked

When I click on the button, I would like the position of the button to change to a random location.

Here is what I have tried:

var b = document.querySelector("button");
b.addEventListener("click",change);
var i = Math.floor(Math.random()*500)+1;
var j = Math.floor(Math.random()*500)+1;
function change()
{
    b.style.left = i+"px";
    b.style.top = j+"px";
}

button{
    margin-left: auto;
    margin-right: auto;
    display: block;
    position: absoulte;
}

<button>
Hello World
</button>

When I click on the button, I would like the position of the button to change to a random location.

Here is what I have tried:

var b = document.querySelector("button");
b.addEventListener("click",change);
var i = Math.floor(Math.random()*500)+1;
var j = Math.floor(Math.random()*500)+1;
function change()
{
    b.style.left = i+"px";
    b.style.top = j+"px";
}

button{
    margin-left: auto;
    margin-right: auto;
    display: block;
    position: absoulte;
}

<button>
Hello World
</button>

Share Improve this question edited Dec 22, 2020 at 21:36 old greg 9071 gold badge10 silver badges20 bronze badges asked Dec 22, 2020 at 15:00 Shashank KR 952 silver badges9 bronze badges

stackoverflow./questions/24638192/…, possible duplicate – stark Commented Dec 22, 2020 at 15:05
You seem to be setting values for i and j only once. If you want them to change on each click they need to be inside the function change. You have mistyped absolute also. – A Haworth Commented Dec 22, 2020 at 15:06

Add a ment |

5 Answers 5

Sorted by: Reset to default 4

Define i and j inside change() method so that it can be randomly updated when button is clicked.

Also, there is a typo in your code position: absoulte which should be corrected to absolute

var b = document.querySelector("button");
b.addEventListener("click",change);
function change()
{
    var i = Math.floor(Math.random()*500)+1;
    var j = Math.floor(Math.random()*500)+1;
    b.style.left = i+"px";
    b.style.top = j+"px";
}

button{
    display: block;
    position: absolute;
}

<button>abc</button>

HTML :-

<body>
 <div class="ctr">
   <button class="button" id="movingbutton">Button</button>
 </div>
</body>

CSS:-

 #movingbutton{
        margin-left: auto;
        margin-right: auto;
        display: block;
           position: absolute;
        left : 20px;
    top : 50px;
    }
    body{
      width : 100%;
    }
    .ctr{
      width : 100%;
    height : 100%;
    }

JS:-

       var b = document.querySelector("#movingbutton");
b.addEventListener("click",change);

function change()
{
let i =Math.abs(Math.floor(Math.random()*window.innerWidth-55))
let j = Math.abs(Math.floor(Math.random()*window.innerHeight-21));
console.log('here' , i ,j , b.style.left , b.style.top);
    b.style.left = i+'px';
    b.style.top = j + "px";
}

If you want you can check here: Live example link

You need to add one more condition if that button goes outside window.innerWidth and window.innerHeight

You'll need to move the random calculation inside the change() function.

To keep the element within it's containing element you can use getBoundingClientRect(). (And account for the size of the button to avoid overlaps on the right and bottom using the same.)

const c = document.querySelector(".container");
const b = document.querySelector("button");

function change() {
  const
    { width: cWidth, height: cHeight } = c.getBoundingClientRect(),
    { width: bWidth, height: bHeight } = b.getBoundingClientRect(),
    i = Math.floor(Math.random() * (cWidth - bWidth)) + 1,
    j = Math.floor(Math.random() * (cHeight - bHeight)) + 1;

  b.style.left = i + "px";
  b.style.top = j + "px";
}

b.addEventListener("click", change);

.container {
  position: relative;
  height: 50vh;
  width: 50vw;
  background-color: lightgray;
}

button{
  position: absolute;
  display: block;
}

<div class='container'>
  <button type='button' id='shifty'>Click</button>
</div>

With this element, you cannot change your random position.

If you want to move randomly a button you can use simple .bind(). You can also move button when your mouse is moving in button area(without clicking it) . Here are both codes:

Code for click

var b = document.querySelector("#movingbutton");
b.addEventListener("click",change);

function change()
{
let i = Math.floor(Math.random()*500)+1;
let j = Math.floor(Math.random()*500)+1;
console.log('here' , i ,j , b.style.left , b.style.top);
    b.style.left = i+'px';
    b.style.top = j + "px";
}

#movingbutton{
    margin-left: auto;
    margin-right: auto;
    display: block;
       position: absolute;
    left : 20px;
top : 50px;
}
body{
  width : 100%;
}
.ctr{
  width : 100%;
height : 100%;
}

<body>
<div class="ctr">
<button class="button" id="movingbutton">Button</button>

</div>
</body>

Code for mousemove

var b = document.querySelector("#movingbutton");
b.addEventListener("mousemove",change);

function change()
{
let i = Math.floor(Math.random()*500)+1;
let j = Math.floor(Math.random()*500)+1;
console.log('here' , i ,j , b.style.left , b.style.top);
    b.style.left = i+'px';
    b.style.top = j + "px";
}

#movingbutton{
    margin-left: auto;
    margin-right: auto;
    display: block;
       position: absolute;
    left : 20px;
top : 50px;
}
body{
  width : 100%;
}
.ctr{
  width : 100%;
height : 100%;
}

<body>
<div class="ctr">
<button class="button" id="movingbutton">Button</button>

</div>
</body>

Programmer puzzle solving

javascript - How to make button randomly change position when clicked - Stack Overflow

5 Answers 5

Articles related to this article

comment list (0)