移动动态创建的按钮 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

您的元素 ID 必须以字母 ([A-Za-z]) 开头。

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

Answer 2

几点：

每次迭代都会评估循环条件。因此，您每次都在与一个新的随机数进行比较，因此按钮数量的概率并不统一。
您不需要 ID。只需将对元素的引用作为参数或作为 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;
}

移动动态创建的按钮 JavaScript

Move a button created dynamically JavaScript

javascript

javascript-events