Swapping between images

[1987dan]

How can i swap between two images each time the user clicks. The user can should only be allowed to click 49 times.

[acoder]

When the user clicks on what? The image?

Yes, that is possible using javascript.

Change the source of the image, e.g.

img.src = 'new_image.gif;

[1987dan]

Apologies my above post was ambigious. What i meant is that i need to create two players. One player is assigned one image say red and the other is assigned another called yellow.

There are 49 different white images. How can alternate between the two players so when player 1 clicks an image it turns to red and when player 2 clicks an image it turns to yellow?

[acoder]

There are 49 different white images. How can alternate between the two players so when player 1 clicks an image it turns to red and when player 2 clicks an image it turns to yellow?

In the function which changes the image, just change the colour to red or yellow. Declare a global variable, say col which you can use for the current colour. There are other ways, but this is one way.

[1987dan]

This is the code so far but every time i click it still shows a red counter.

var whoseTurn = 1
 
   playerChecker = new Image()
   playerChecker.src = "redCounter.jpg"
 
   if(whoseTurn == 1){
   playerChecker.src = "redCounter.jpg"
   } else if(whoseTurn == 2) {
   playerChecker.src = "yellowCounter.jpg"
   } 
 
   function switchTurns(){
       if(whoseTurn == 1){
       whoseTurn = 2;
   } else {
       whoseTurn = 1;
   }}
 
   function changeimage(id){
       switchTurns()    
       if(document.getElementById([id]).src == "whiteCounter.jpg"){
           document.getElementById([id]).src = playerChecker.src ;          
       }}

[acoder]

This is the code so far but every time i click it still shows a red counter.

var whoseTurn = 1
 
   playerChecker = new Image()
   playerChecker.src = "redCounter.jpg"
 
   if(whoseTurn == 1){
   playerChecker.src = "redCounter.jpg"
   } else if(whoseTurn == 2) {
   playerChecker.src = "yellowCounter.jpg"
   } 
 
   function switchTurns(){
       if(whoseTurn == 1){
       whoseTurn = 2;
   } else {
       whoseTurn = 1;
   }}
 
   function changeimage(id){
       switchTurns()    
       if(document.getElementById([id]).src == "whiteCounter.jpg"){
           document.getElementById([id]).src = playerChecker.src ;          
       }}

There are a few problems with the code. The code for switching the colour must be included in the switchTurns function:

function switchTurns() {
 if (whoseTurn == 1) {
  whoseTurn = 2;
  playerChecker.src = "yellowCounter.jpg"
 } else {
  whoseTurn = 1;
  playerChecker.src = "redCounter.jpg"
 }
}
 

Alternatively, keep switchTurns as it is and put your image swapping code in another function and call that in switchTurns (at the end) or in changeimage.

In changeimage, the id should not have square brackets, e.g.

document.getElementById(id).src

[1987dan]

That now works. Thanks allot you have been a great help.