Почему можно изменить размер только моего последнего добавленного элемента страницы?

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 как часть идентификатора: если вы ожидаете, что он будет уникальным, это может быть не так. Например, x = 500, y = 10 и x = 10, y = 500 приведут к одному и тому же идентификатору. Как насчет простого использования xPix + ',' + yPix как строки?

2. Несколько строк, в которых вы инициализируете Pieces[id], могут быть уменьшены до более простой формы с помощью обозначения объекта: Pieces[id] = { Piece: ..., xPix: ..., yPix: ... }.