Как заставить кнопку случайным образом менять положение при нажатии

Когда я нажимаю на кнопку, я хотел бы, чтобы положение кнопки изменилось на случайное место.

Вот что я пробовал:

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>

stackoverflow.com/questions/24638192/…, возможен дубликат

— 22.12.2020 16:05

Кажется, вы устанавливаете значения для i и j только один раз. Если вы хотите, чтобы они менялись при каждом щелчке, они должны быть внутри изменения функции. Вы также ошиблись в абсолютном значении.

— 22.12.2020 16:06

javascript css dom

22.12.2020 16:00

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

4 126

Перейти к ответу Данный вопрос помечен как решенный

Ответы 4

Ответ принят как подходящий

Определите i и j внутри метода change(), чтобы его можно было случайным образом обновлять при нажатии кнопки.

Кроме того, в вашем коде есть опечатка position: absoulte, которую следует исправить на 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>

Также отметьте, что вы исправили absolute

— 22.12.2020 16:11

22.12.2020 16:04

Вам нужно переместить случайный расчет внутрь функции change().

Чтобы сохранить элемент внутри содержащего его элемента, вы можете использовать getBoundingClientRect(). (И учитывайте размер кнопки, чтобы избежать наложения справа и снизу, используя то же самое.)

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>

22.12.2020 16:13

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.info('here' , i ,j , b.style.left , b.style.top);
    b.style.left = i+'px';
    b.style.top = j + "px";
}

Если вы хотите, вы можете проверить здесь: Ссылка на живой пример

Вам нужно добавить еще одно условие, если эта кнопка выходит за пределы window.innerWidth и window.innerHeight.

22.12.2020 16:22

Если вы хотите случайным образом перемещать кнопку, вы можете использовать простой .bind(). Вы также можете перемещать кнопку, когда ваша мышь перемещается в области кнопки (не нажимая на нее). Вот оба кода:

Код для клика

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.info('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>

Код для перемещения мыши

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.info('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>

22.12.2020 16:56

Другие вопросы по теме

Как сделать баннер и изображение в разделе баннеров реагирующими на разные размеры экрана (например, планшет)

R Shiny - Уменьшить расстояние между элементами в столбце

Как я могу сделать этот макет Святого Грааля на основе CSS Grid с изменяемым размером заголовка, нижнего колонтитула и боковых панелей?

Как применить правило к дочернему элементу только после его создания (CSS)?

Содержит более крупный текст в строке таблицы

Как я могу подготовить/запустить страницу из центра, а не сверху?

Как добавить межбуквенный интервал к входному значению, но не к заполнителю ввода (Angular 11)

Дата ввода HTML, как уменьшить расстояние между датой и значком?

Jquery delete parent не работает на всей строке! Что я делаю не так?

Почему мои дочерние элементы div не прокручиваются и не выравниваются по столбцам?

Как заставить кнопку случайным образом менять положение при нажатии

Ответы 4

Другие вопросы по теме

Похожие вопросы