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

Inserting images into my "Rock, paper, scissors" game

Hey guys, I just finished writing my first game and would like to be able to insert images into it based on the outcome. As the title states, the game is "rock, paper, scissors". My game's code is below(critique is also welcome, and yes I know I haven't provided documentation yet). I have images saved in the nested img folder that I want to use for this. How can I insert the images using JavaScript? Thanks in advance!

function rockPaperScissors (userInput) {
    var computerChoice1 = Math.floor(Math.random() * 3) + 1;
    var userChoice1, userChoice2;
    var computerChoice2;

    var userChoice1 = userInput.toUpperCase();
    if (userChoice1 === "ROCK") {
        userChoice2 = 1;
    }
    else if (userChoice1 === "PAPER") {
        userChoice2 = 2;
    }
    else if (userChoice1 === "SCISSORS") {
        userChoice2 = 3;
    }

    if (userChoice2 === 1) {
        if (computerChoice1 === 1) {
            document.write("<h1>Ha! We tied!</h1>");
        }
        else if (computerChoice1 === 2) {
            document.write("<h1>Ha ha! Paper covers rock!</h1>");
        }
        else if (computerChoice1 === 3) {
            document.write("<h1>Booo! Your rock smashed my scissors!</h1>");
        }
    }

    if (userChoice2 === 2) {
        if (computerChoice1 === 1) {
            document.write("<h1>Booooo! Your paper covered my rock!</h1>");
        }
        else if (computerChoice1 === 2) {
            document.write("<h1>Ha! We tied!</h1>");
        }
        else if (computerChoice1 === 3) {
            document.write("<h1>Hehehehe my scissors cut your paper!</h1>");
        }
    }

    if (userChoice2 === 3) {
        if (computerChoice1 === 1) {
            document.write("<h1>Wooo! Rock SMASHES scissors!</h1>");
        }
        else if (computerChoice1 === 2) {
            document.write("<h1>Oh no! Your scissors cut my paper!</h1>");
        }
        else if (computerChoice1 === 3) {
            document.write("<h1>Well, looks like we tied!</h1>");
        }
    }
}
rockPaperScissors(prompt("Rock, paper, or scissors?"));

2 Answers

Hey Larry,

You can insert images the same way you're inserting other HTML elements. Just be sure to use differing quotes outside the string of the element and inside it.

//Adds picture 'avatar.png' to document
document.write("<img src='img/avatar.png' alt='avatar'>");

That worked! Thank you very much! :)

You're very welcome! :)