我用JS/HTML/CSS做了一个渐变沙盒程序，基本上是为了练习dom操作。到目前为止，我有一个工作程序，可以用箭头键在屏幕上移动一个框，改变它的高度、宽度、边框半径和颜色。我希望程序能够创建一个新的盒子，然后将旧盒子的ID属性传递给新盒子，这样用户就能够对新盒子进行相同的操作，而旧盒子则位于屏幕上，用户在适当的位置进行更改。到目前为止，试图将id传递给新的盒子只是使程序崩溃。

此代码在& quotn & quot。它确实创建了一个新的盒子，但是新的盒子不能被操作，旧的盒子不能保留它的改变，并且程序的背景颜色变得混乱:

function newBox(event) {
  box.style.border = "none";
  box.id = ""
  let box2 = document.createElement("div");
  body.appendChild(box2);
  box2.id = "box";
}

程序的开头包含这样一行:

let box = document.getElementById('box')

box变量是由keydown事件操纵的。 我还尝试给全局计数器变量I赋值，并将上面的代码行改为:

let box = document.getElementById('box' + i.toString() )

newBox()函数将递增计数器，并为新的盒子分配一个id(' box '+I . tostring())。这也导致了程序崩溃。

谢谢你看问题。我对编码很陌生，所以我选& quot你想做的事情是完全不可能的& quot一个完全可以接受的答案。

我假设您的事件侦听器都绑定到box元素，并且在您添加它之后不会在box2上注册。要操作你的盒子，你实际上不需要ID，你只需要存储对你创建的最后一个盒子的引用。 在我的例子中，我仍然设置了ID，因为这是你的问题的一部分。每当& quotn & quot时，一个可能的旧框将把它的ID设置为空(您可能希望使用removeAttribute()完全删除这个ID)，将使用给定的& quot# box & quotID，然后可以通过光标移动。

let box;

function newBox() {
  if (box) {
    box.style.border = "none";
    box.id = ""
  }
  let box2 = document.createElement("div");
  box2.classList.add("box");
  document.body.appendChild(box2);
  box2.id = "box";
  box = box2;
}

function moveBox(x,y) {
  if (box) {
    box.style.top = parseFloat(box.style.top || 0) + y + 'px'; 
    box.style.left = parseFloat(box.style.left || 0) + x + 'px'; 
  }
}

document.onkeydown=function(event) {
  switch (event.key.toLowerCase()) {
    case 'n':
      newBox();  
      break;
    case 'arrowleft':
      moveBox(-1, 0);
      break;
    case 'arrowright':
      moveBox(1, 0);
      break;      
    case 'arrowdown':
      moveBox(0, 1);
      break;
    case 'arrowup':
      moveBox(0, -1);
      break;      
  }
}

body {
  font: 14px Calibri, sans-serif, normal;
}
#box {
  background-color: red;
}
.box {
  border: 2px solid green;
  position: absolute;
  background-color: blue;
  width: 50px;
  height: 50px;
}

Type "n" to create a new box and to move it.

而不是使用& quotID & quot使用& quotClass & quot。此外，您可以使用JS创建一个& quot对象/模板& quot你的& quot方框& quot元素来帮助区分box元素的新实例。创建一个& quot方法& quot为了你的盒子& quot对象& quot其中它在创建新实例时移除事件侦听器。您可以将这些对象实例存储在& quot数组& quot为了更容易& quot索引& quot。

希望这不会令人困惑。我试着给你一些关键词，我相信这些关键词会帮助你找到正确的方向。

MDN -删除事件侦听器

class Box {
  constructor(height, width, color, posX, posY) {
    this.height = height;
    this.width = width;
    this.color = color;
    this.posX = posX;
    this.posY = posY;
  }
}

let arr = [];

function newBox() {
  let box = new Box(10, 10, 'blue', 50, 50);
  arr.push(box);
  console.log(arr);
}

<button onclick="newBox()">
Box Gen
</button>