Problems with random images in array

Question

 var eieren = 0; var eieren = Math.floor((Math.random() * 4) + 1); var imgArray = [ 'img/ei1.png' , 'img/ei2.png' , 'img/ei3.png', 'img/ei4.png' ]; imgArray.length; var eiImg = imgArray[eieren - 1]; console.log( eiImg ); document.getElementsByTagName( 'img' )[0].src = eiImg; document.getElementsByTagName( 'img' )[0].addEventListener( "click", changeImage ); var counter = eieren - 1; function changeImage() { //Load new image if this is not the last image if ( counter < imgArray.length - 1 ) { document.getElementsByTagName( 'img' )[0].src = imgArray[ ++counter % imgArray.length]; } };

 <html lang="en"> <head> <!-- <link rel="stylesheet" type="text/css" href="css/style.css">--> <meta charset="UTF-8"> <title>Document</title> </head> <body> <img src="img/questionmark.png" id= "first" alt="questionmark" width="200" height= "300" onClick ="changeImage()"> <script type="text/javascript" src="js/eigame.js"></script> </body> </html>

I am new on this website and I'm having struggles with a project of mine. Let me explain what I want to make.

I have an array with 4 images. Every time the page refreshes, a random image (so a random image from the array) appears. I'm making a very simple game where you have to click on images of eggs with 1 crack, 2 cracks, 3 cracks and one where a chick is coming out of an egg. The goal of the game is to get all the chicks out of the eggs. So the page is refreshed and for example, the image with the egg with 2 cracks shows up. That means you have to click 2 times (array: img1(egg with 1 crack), img2(egg with 2 cracks), img3(egg with 3 cracks), img4(image with chick coming out the egg) to show the image with the chick out of the egg. At the end of the game (i still have to make a timer) all of the pictures have to be the chick coming out of the egg. So with I think with a For loop, it will check at the end of the game if all images are img4.

It's working a little bit, but there is a problem. When I refresh the page a random image shows up. For example img2. I have to click 2 times to get to the chick. But in my case, when i click, it changes first in to the first image of the array, img1. And then when you click it again it will go from img1 to 2 to 3 to 4 and if you click again to 1 again.

What I want is if the page for example shows img2, and you click on the image, it will go to the next image in the array. Not first go to img1 and then go to the next images.

Once that is fixed, I want the clickfunction to stop at the last image in the array. So if the last image in the array is shown, the chick out of the egg, you can't click anymore further. Now, when you click the chick picture, it goes back to the first image in the array.

Here is my code so far (I'm very new with javascript, I'm sorry for the many questions) I hope someone can help me with this, I've been stuck for days..

var eieren = 0;
var eieren = Math.floor((Math.random() * 4) + 1);

var imgArray = [ 'img/ei1.png' , 'img/ei2.png' , 'img/ei3.png', 'img/ei4.png' ];

imgArray.length;

var eiImg = imgArray[eieren - 1];

console.log(eiImg);

document.getElementsByTagName('img')[0].src = eiImg;

  var counter=[0];

  function changeImage(){
    //Change image and increment counter
    document.getElementById("first", "second").src=imgArray[counter++ % imgArray.length];
  }

This is in my HTML:

 <img src="img/questionmark.png" id= "first" alt="questionmark" width="200" height= "300" onClick ="changeImage()">

I made a Fiddle but it's not working on it. Gosh, I'm probably doing something wrong. Sorry!.. https://jsfiddle.net/mtjsd0bL/

Answer 1

I think that your problem is with counter++ in change image. Try set it to eiImg not to [0] Something like this:

var eieren = 0;
var eieren = Math.floor((Math.random() * 4) + 1);

var imgArray = [ 'img/ei1.png' , 'img/ei2.png' , 'img/ei3.png', 'img/ei4.png' ];


    imgArray.length;

    var eiImg = imgArray[eieren - 1];

    console.log( eiImg );

    document.getElementsByTagName( 'img' )[0].src = eiImg;
    document.getElementsByTagName( 'img' )[0].addEventListener( "click", changeImage );
    var counter = eieren - 1;

    function changeImage()
    {
        //Load new image if this is not the last image
        if ( counter < imgArray.length - 1 )
        {
            document.getElementsByTagName( 'img' )[0].src = imgArray[ ++counter % imgArray.length];
        }
    }

Check my updated answer.

Problems with random images in array

Question

1 answers

solution1
0 ACCPTED 2015-04-06 14:39:33

Problems with random images in array

Question

1 answers

solution1 0 ACCPTED 2015-04-06 14:39:33

solution1
0 ACCPTED 2015-04-06 14:39:33