Передвиньте кнопку, созданную динамически JavaScript

Question

Я очень новичок! Я динамически создавал случайное количество кнопок. После создания я хочу, чтобы они автоматически начали двигаться. По какой-то причине мой код создает кнопки, но не заставляет их перемещаться. Спасибо большое!

javascript.js

function myFunction() { 
    for (i = 1; i<=Math.random() * 10; i++){ 
      var x = document.createElement("button"); 
      x.id = i; 
      x.innerHTML = i; 

      document.body.appendChild(x); 
      moveMe(x.id); 
      var v1 = Math.floor(Math.random() * 255); 
      var v2 = Math.floor(Math.random() * 255); 
      var v3 = Math.floor(Math.random() * 255); 
      x.style.backgroundColor = "rgb(" + v1 + "," + v2 + "," + v3 + ")"; 

     } 
} 

function uMM(id){ 
    var x = document.getElementById(id); 
    x.pozx = x.pozx + 1; 
    x.pozy = x.pozy + 1; 
    x.style.left = x.pozx + "px"; 
    x.style.top = x.pozy + "px"; 

} 
function moveMe(id){ 
    var x = document.getElementById(id); 
    x.pozx = 0; 
    x.pozy = 0; 
    setInterval("uMM(" + id + ")", 1000); 
} 

home.php

<input type="text" id="demo"> 

Answer 1

Некоторые пункты:

• условия Loop оцениваются на каждой итерации. Поэтому вы сравнивали каждый раз с новым случайным числом, поэтому вероятность того, что количество кнопок было неравномерным.
• Вам не нужны идентификаторы. Просто передайте ссылку на элемент в качестве аргумента или как значение this.
• Не используйте setTimeout или setInterval со строками, потому что это как зло eval! Вместо этого используйте функции.

(function myFunction() { 
 
    for (var i=1, l=Math.random()*10; i<=l; ++i){ 
 
    var x = document.createElement("button"); 
 
    x.innerHTML = i; 
 
    document.body.appendChild(x); 
 
    moveMe(x); 
 
    var rgb = Array.apply(null, Array(3)).map(function() { 
 
     return Math.floor(Math.random() * 255); 
 
    }).join(','); 
 
    x.style.backgroundColor = "rgb(" + rgb + ")"; 
 
    } 
 
})(); 
 
function uMM(){ 
 
    var x = this; 
 
    x.style.left = ++x.pozx + "px"; 
 
    x.style.top = ++x.pozy + "px"; 
 
} 
 
function moveMe(x){ 
 
    x.pozx = x.pozy = 0; 
 
    setInterval(uMM.bind(x), 1e3); 
 
}

button { 
 
    position: relative; 
 
}

Answer 2

Ваш элемент-идентификатор должен начинаться с буквы ([A-Za-Z]).

var x = document.createElement("button"); 
x.id = 'dyn-button-' + i;