为什么我的最近添加的页面元素只能调整大小？

Question

我有一个网页，我可以点击它来添加图片。如果我然后单击图像使其变大，如果我再次单击它会将其重新调整为原始大小。 如果我然后单击屏幕上的其他位置，我可以创建另一个图像，并通过单击它来增长和缩小。 问题是，即使没有删除或更改任何变量，也可以通过单击来调整最新图像的大小。 这是我正在进行的游戏的一部分。 我用尽可能少的代码制作了一个示例页面来试用它，可以在这里找到。 http://johncleary.net/hg/ 我想要的是能够随时点击任何图像，它会增长和缩小

Answer 1

从页面上的代码中，我看到您正在使用innerHTML += ...添加新图像 - 这不是一件好事，因为它会导致浏览器每次都重新创建所有内部元素所以，这个可能引起与事件处理程序的奇怪交互。

考虑使用DOM方法来创建和添加元素，例如：

var e = document.createElement('img');
e.id = id;
e.onclick = pieceClicked; // No parameter required, this.id is available directly inside the function
...
board.appendChild(e);

---

其他一些旁注：

1. 您正在使用xPix * yPix作为ID的一部分：如果您希望这是唯一的，则可能不是。例如，x = 500, y = 10和x = 10, y = 500将生成相同的ID。如何将xPix + ',' + yPix单独用作字符串？

2. 使用对象表示法可以将初始化Pieces[id]的几行简化为更简单的形式：Pieces[id] = { Piece: ..., xPix: ..., yPix: ... }。