0

I have a webpage where I can click on it to add a image. If I then click on the image it makes it bigger and if I click again it resizes it back to the original size. If I then click somewhere else on the screen I can create another image and grow and shrink this also by clicking on it. The problem is only the latest image can be resized by clicking even though none of the vars are being removed or changed. This is part of a game I am working on. I made a sample page with the least possible code to try it out and can be got here. http://johncleary.net/hg/ What I want is to be able to click on any image at any time and it will grow and shrink

2
  • What's the point of the pieceC variable? I don't see any reason for it.
    – Matt Ball
    Oct 26, 2010 at 3:27
  • 1
    Your title should be a summary of your question; titles like "please help me" aren't very good advertisements for your question.
    – user229044
    Oct 26, 2010 at 3:29

1 Answer 1

3

From the code on your page, I see that you are using innerHTML += ... to add new images - this isn't a very good thing, because it causes the browser to recreate all the inner elements every time you do so, and this could cause weird interactions with event handlers.

Consider using DOM methods to create and add elements, for example:

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

Some other side notes:

  1. You're using xPix * yPix as part of the ID: if you expect this to be unique, it may not be. For example, x = 500, y = 10 and x = 10, y = 500 will result in the same ID. How about just using xPix + ',' + yPix as a string by itself?

  2. The several lines in which you initialize Pieces[id] can be reduced to a simpler form using object notation: Pieces[id] = { Piece: ..., xPix: ..., yPix: ... }.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.