Javascript (html) - getting a variable to have to same value as an img with .src

Question

I'm creating a game that displays images, and if the player clicks on the image, a function is called to update the stats (score/correct answers/incorrect answers). I've stored the images in an array, and within the update stats function I compare the player's answer (image selected) with the array. However, no matter whether correct or not, the player's answer is always classed as wrong and they never get any correct answers.

Could somebody please check out my code to see if they can spot any obvious errors. Much appreciated.

function displayImgs () {
     for(i = 0; i < allCelebs.length; i++){
        document.getElementById("image"+i).src = fullList[i];
    }
}

function updateStats () {
    Answer = document.getElementById("image"+i); 
    var counter = 0;
    while (counter < selectedImages.length) {
        if (Answer==selectedImages[counter]) {
            score+=50;
            correctAnswers+=1;
        } else {
            score-=20;
            incorrectAnswers+=1;
        }
        counter++;
    }
}

And my code for generating the images in html:

<script> 
for (count=0;count<16;count++) {
    document.write("<img id='image",count,"' src='blank.jpg' onClick='updateStats();'>"); 
}
</script>

change to function updateStats ( i ) { and onClick='updateStats( count ) ? :-) — TheFisch
– TheFisch, Commented May 8, 2015 at 16:34

devconcept · Accepted Answer · 2015-05-08 16:47:58Z

1

You are not obtaining the correct element in the click event. You can change the generator to this. Note the additional parameter passed to the updateStat function.

    for (count=0;count<16;count++) {
        document.write("<img id='image",count,"' src='blank.jpg' onClick='updateStats(",count,");'>"); 
    }

And then you will have a reference of which image was clicked

function updateStats (index) {
    Answer = document.getElementById("image"+index); 
    var counter = 0;
    while (counter < selectedImages.length) {
        if (Answer==selectedImages[counter]) {
            score+=50;
            correctAnswers+=1;
        } else {
            score-=20;
            incorrectAnswers+=1;
        }
        counter++;
    }
}

answered May 8, 2015 at 16:47

devconcept

3,6951 gold badge29 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Indy Over a year ago

I think that's helped a little, as when I check the debugger it says that playerAnswer is undefined, whereas before, it said 'null'.

Indy Over a year ago

However, the correct answer still doesn't update correctly, I'm pretty sure it's something to do with the line document.getElementById("image"+i).src = fullList[i]; The image is a .src but Answer isn't, and I'm not sure how to make them contain the same type of value, any ideas? Thank you.

devconcept Over a year ago

Without a full example i cannot help you more. For example i cannot figure out where you assign selectedImages, allCelebs or fullList variables or what are it's values

Collectives™ on Stack Overflow

Javascript (html) - getting a variable to have to same value as an img with .src

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related