Pourquoi mon élément de page le plus récemment ajouté peut-il être redimensionné?

Question

J'ai une page Web où je peux cliquer dessus pour ajouter une image. Si je clique ensuite sur l'image, elle est plus grande et si je clique à nouveau, elle redimensionne la taille d'origine. Si je clique ensuite ailleurs sur l'écran, je peux créer une autre image et la faire grandir et la réduire en cliquant dessus. Le problème est que la dernière image peut être redimensionnée en cliquant même si aucune des variables n'est supprimée ou modifiée. Cela fait partie d'un jeu sur lequel je travaille. J'ai fait un exemple de page avec le moins de code possible pour l'essayer et je peux l'obtenir ici. http://johncleary.net/hg/ Ce que je veux être en mesure de cliquer sur une image à tout moment et il se développera et se rétrécir

Answer 1

À partir du code sur votre page, je vois que vous utilisez innerHTML += ... pour ajouter de nouvelles images - ce n » C'est une très bonne chose, car cela oblige le navigateur à recréer tous les éléments internes à chaque fois que vous le faites, et cela peut provoquer des interactions bizarres avec les gestionnaires d'événements.

Envisager d'utiliser des méthodes DOM pour créer et ajouter des éléments, par exemple:

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); 

---

D'autres notes secondaires:

1. Vous utilisez xPix * yPix dans le cadre de l'ID: Si vous vous attendez à ce que ce soit unique, ce n'est peut-être pas le cas. Par exemple, x = 500, y = 10 et x = 10, y = 500 donneront le même ID. Que diriez-vous juste d'utiliser xPix + ',' + yPix comme une chaîne par elle-même? Les lignes sur lesquelles vous initialisez Pieces[id] peuvent être réduites à une forme plus simple en utilisant la notation d'objet: Pieces[id] = { Piece: ..., xPix: ..., yPix: ... }