Измените положение h1 случайным образом с помощью кнопки - PullRequest
Новая
       19

Измените положение h1 случайным образом с помощью кнопки

0 голосов
/ 30 октября 2018

Я должен изменить положение заголовка h1 случайно после нажатия кнопки.

Вот мой код:

Декларация HTML 

function move() {
  console.log("MOVE");
  var text = document.getElementById("text_to_move");
  text.style.positon = "absolute";
  text.style.left = randomposition();
  text.style.top = randomposition();

}

function randomposition() {
  var x = Math.floor(Math.random() * 100) // RANDOM NUMBER BETWEEN 0 AND 100
  var y = x + "px";
  console.log(y);
  return y;

}
<header id="header">
  <h1 id="text_to_move">
    TITLE
  </h1>
</header>
<input type="button" value="MOVE" onclick="move()">

¿Любое предложение?

Ответы [ 2 ]

0 голосов
/ 30 октября 2018 

function move() {
  console.log("MOVE");
  var text = document.getElementById("text_to_move");
  text.style.left = randomposition();
  text.style.top = randomposition();
  text.style.position = "absolute";
}

function randomposition() {
  var x = Math.floor(Math.random() * 100) // RANDOM NUMBER BETWEEN 0 AND 100
  var y = x + "px";
  console.log(y);
  return y;

}
<header id="header">
  <h1 id="text_to_move">
    TITLE
  </h1>
</header>
<input type="button" value="MOVE" onclick="move()">

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

true (me)   = text.style.position = "absolute";
false (you) = text.style.positon = "absolute";
0 голосов
/ 30 октября 2018

Вам нужно установить position:relative для идентификатора # text_to_move :

Вот обновленный фрагмент кода: 

function move() {
  console.log("MOVE");
  var text = document.getElementById("text_to_move");
  text.style.positon = "absolute";
  text.style.left = randomposition();
  text.style.top = randomposition();

}

function randomposition() {
  var x = Math.floor(Math.random() * 100) // RANDOM NUMBER BETWEEN 0 AND 100
  var y = x + "px";
  console.log(y);
  return y;

}
#text_to_move{
  position:relative;
}
<header id="header">
  <h1 id="text_to_move">
    TITLE
  </h1>
</header>
<input type="button" value="MOVE" onclick="move()">
...