Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by fraudcarolinaquiel
fraudcarolinaquiel
94 Points

How to change/replace an image after an event?

I am working on a guessing game using JS, and I am trying to change an image after an event:

(if (guessesLeft <= 7) { document.getElementById("currentImageID").src = "currentImageURL.png"; }

I had tried different ways but it doesn't work to save my life!

Pleas help!

6 Answers

Tsenko Aleksiev
Tsenko Aleksiev
3,819 Points
Tsenko Aleksiev
Tsenko Aleksiev
3,819 Points

Try replacing "if (guessesLeft = 9)" with "if (guessesLeft == 9)". With "=" you asign the value. You have to check it, aka "==". Try it out and post back :)

fraudcarolinaquiel
fraudcarolinaquiel
94 Points

Still doesn't work. Here is a link to my repository: https://github.com/carolunita/Word-Guess-Game

Maybe looking at the files can give you a better idea. Thank you so much for your time and support.

Tsenko Aleksiev
Tsenko Aleksiev
3,819 Points

I’m sorry but the view of the repository from the phone is not that good. As soon as I go home I’ll look it and give it a try

fraudcarolinaquiel
fraudcarolinaquiel
94 Points

Thank you! :)

Tsenko Aleksiev
Tsenko Aleksiev
3,819 Points

Sooo...you have a lot of typos and I'm a bit confused already :) I can point them out but I suggest to you to use this: https://validator.w3.org/ and also this is reaaaaaaly helpful if you ask me: http://jshint.com/

and go through all of them. For example:

<img src="assets/images/Mother.png" width="120" height="120" alt="Mother" class="d-block mx-auto img-fluid" ><p class="text-center names">MOTHER</p>

Here, your height is written, "height="=120". There are typos in the js as well.

Paste your html and your js in those sites, clear all the typos you can find. I'm not sure yet but I think the main reason is that when you are checking how many characters are to go, there you should have, let's say a function and a loop so that you can make more than one check of the images and the remaining guesses. I'm sorry if I'm not that clear enough but in BG is 01 AM and your code is really p.... me off :D Tomorow I'll try to rewrite all of your code and see where is the problem with those darn images of yours :)

fraudcarolinaquiel
fraudcarolinaquiel
94 Points

Dear Tsenko, I am sorry my code p.... you off. I am a beginner so bear with me. I’ll try to correct all the typos and see how it goes. I’ll update the repository once I am done as well. Thank you for your input but most of all for your time. I’ll keep you posted. Have a good night.

Tsenko Aleksiev
Tsenko Aleksiev
3,819 Points

Oh my...Carolina :D I'm a noobie as well, in fact, if you want me to make your game from scratch I will probably shoot my self, I'm not sure if I'll be able to do it. It's just that I'm really stubborn and the fact that I can't get your code to work really get's me nervous. We will make it work, but I'm done for today, and I'll give it a fresh start tomorrow. I got the idea of the game, I have something on my mind and I'll give it a shot :)

fraudcarolinaquiel
fraudcarolinaquiel
94 Points

I was partially able to solve it. The getElementById was trying to select the div around the img tag but there was not src attribute on the div, so I transferred the id from the div to the img and then the code worked, but now two of the images are not changing after the event, different issue though. I updated the repository!

Tsenko Aleksiev
Tsenko Aleksiev
3,819 Points

I still haven’t managed to sit on the laptop but as soon as I get home ( too much work and family to-do’s ) I will go through the new code and give it a go. Have you used the two sites I gave you, were they helpful?

fraudcarolinaquiel
fraudcarolinaquiel
94 Points

No worries my friend! I did use both sites and I was able to correct the typos, add a missing div and a couple of missed semicolumns, thank you so much. :)

Tsenko Aleksiev
Tsenko Aleksiev
3,819 Points

Give me a laptop with wifi and some free time and I’m always there to help you, Carolina! I’m glad that I’ve managed to help you, no matter how small the help was :) See ya later!

fraudcarolinaquiel
fraudcarolinaquiel
94 Points

It is working now... You can check it out here: https://carolunita.github.io/Word-Guess-Game/ Thank you so much for your time and support.

Tsenko Aleksiev
Tsenko Aleksiev
3,819 Points
Tsenko Aleksiev
Tsenko Aleksiev
3,819 Points

Hi there! Is your path to the new image right? Can you give me the code part for "guessesLeft"? So far it seems ok...

fraudcarolinaquiel
fraudcarolinaquiel
94 Points
fraudcarolinaquiel
fraudcarolinaquiel
94 Points

I thought it could be the path so I used an URL image but that doesn't work either. Here is the code part for the guessesLeft:

var guessesLeft = 9;

//Reset game variables needed to be cleared before each new game starts
    guessesLeft = 9;
    wrongLtrs = [];
    answerDisplay = [];

        //Reset the images
        if (guessesLeft = 9) {
            document.getElementById("motherImg").removeAttribute("src");
            document.getElementById("fatherImg").removeAttribute("src");
            document.getElementById("wybieImg").removeAttribute("src");
            document.getElementById("bobinskyImg").removeAttribute("src");
        }

//Call function to start the game for the first time newGame();

//Get input from user on what keys are being pressed
document.onkeyup = function(event) {
    //Create a variable to hold all the letters that have been guessed
    var ltrsGuessed = String.fromCharCode(event.keyCode).toLowerCase();
        console.log("You Guessed the letter: " + ltrsGuessed); // Testing via Console.Log

    //Run the check letters function
    checkLtrs(ltrsGuessed);
    roundComplete();

    //Game interation with the images (Guesses Left, as displayed by images)
    if (guessesLeft <= 7) { 
               document.getElementById("motherImg").src = "http://i66.tinypic.com/234i6h.png";

}

eslam said
PLUS
eslam said
Courses Plus Student 6,734 Points
eslam said
eslam said
Courses Plus Student 6,734 Points

It's alright, if its not working let me know

fraudcarolinaquiel
fraudcarolinaquiel
94 Points

Still not working, here is a link to my repository in case you want to take a look.

https://github.com/carolunita/Word-Guess-Game

eslam said
PLUS
eslam said
Courses Plus Student 6,734 Points
eslam said
eslam said
Courses Plus Student 6,734 Points

I' m trying to fix it with you guyz, sorry if its taking me a long time to fix it, long code a head

fraudcarolinaquiel
fraudcarolinaquiel
94 Points

Thank you! Your help is appreciated...

eslam said
PLUS
eslam said
Courses Plus Student 6,734 Points
eslam said
eslam said
Courses Plus Student 6,734 Points

As tensko mentioned, for further explanation :

Assignment operators are used to assign values to JavaScript variables.

var age = 25;

Comparison operators are used determine equality or difference between variables or values

if ( age === 25 ) {
// do something
}
fraudcarolinaquiel
fraudcarolinaquiel
94 Points

Good to know eslam... Thank you!