javascript - How to make button randomly change position when clicked

admin管理员组
文章数量:1026253

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>

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>

本文标签： javascriptHow to make button randomly change position when clickedStack Overflow

版权声明：本文标题：javascript - How to make button randomly change position when clicked - Stack Overflow 内容由热心网友自发贡献，该文观点仅代表作者本人，转载请联系作者并注明出处：http://it.en369.cn/questions/1745627827a2159972.html，本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。

369IT编程

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

5 Answers 5

5 Answers 5

更多相关文章