Hi I am trying to put my images from my computer into my rock paper scissors game but I am having trouble with that and it just wont work I don't know where I am going wrong.
and also when I put the images in then I have to take away my alert out of my code for it to work I will include my JavaScript and my HTML and also my fiddle.
I am having a lot of trouble with is I am really stuck and really having trouble.

[FIDDLE](http://jsfiddle.net/Matt1990/qthbgph6/43/)

JavaScript

```
var differentOptions = ["rock", "paper", "scissors"];
var scores = [0, 0, 0, 0];

function Picks(id) {
var choice1 = id;

var imagePlayer = "<img='rps-paper" + "<img='rsp-rock" + "<img='rps-scissors" + choice1 + ".gif'   />";

var choice2 = computerGenerate();

var imageComputer = "<img='rps-paper" + "<img='rsp-rock" + "<img='rps-scissors" + choice2 + ".gif' />";

alert ("You chose " + choice1 + ". The computer chose " + choice2 + "! " + compare(choice1, choice2));
document.getElementById('player').innerHTML = imagePlayer;
document.getElementById('computer').innerHTML = imageComputer;
displayScores();

}

function computerGenerate() {
var num = [Math.floor(Math.random() * 3)]
var computerChoice = differentOptions[num];
return computerChoice;
}

function compare(choice1, choice2) {
if (choice1 == choice2) {
    scores[0]++;
    scores[3]++;
    return (" Draw You both picked the same! Try again!");
} else if (choice1 == "rock") {
    if (choice2 == "scissors") {
        scores[1]++;
        scores[3]++;
        return ("You Win!");
    } else {
        scores[2]++;
        scores[3]++;
        return ("You Lose!");
    }
} else if (choice1 == "paper") {
    if (choice2 == "rock") {
        scores[1]++;
        scores[3]++;
        return ("You Win!");
    } else if (choice2 == "scissors") {
        scores[2]++;
        scores[3]++;
        return ("You Lose!");
    }
} else if (choice1 == "scissors") {
    if (choice2 == "rock") {
        scores[2]++;
        scores[3]++;
        return ("You Lose!");
    } else if (choice2 == "paper") {
        scores[1]++;
        scores[3]++;
        return ("You Win!");
        }
    }
}

function displayScores() {
document.getElementById("wins").innerHTML = "Wins: " + scores[1];
document.getElementById("loss").innerHTML = "Losses: " + scores[2];
document.getElementById("ties").innerHTML = "Ties: " + scores[0];

document.getElementById("games").innerHTML = "Games Played: " + scores[3];
}

function resetScores() {
scores = [0, 0, 0, 0];
displayScores();
}

```

This is my HTML.

```
<div style="text-align: center;">
<div id="optionsPanel">
     <h1 class="title">Let's Play Rock / Paper / Scissors!</h1>

    <div id="computer"></div>
    <br/>
    <div id="player"></div>
    <button id="rockButton" class="button" onclick='userPicks("rock")'>Rock</button>
    <button id="paperButton" class="button" onclick='userPicks("paper")'>Paper</button>
    <button id="scissorsButton" class="button" onclick='userPicks("scissors")'>Scissors</button          </div>
    <div id="scoresPanel">
         <h2 class="title">Scores:</h2>

        <div id="wins" class="scores">Wins:</div>
        <div id="loss" class="scores">Losses:</div>
        <div id="ties" class="scores">Ties:</div>
        <div id="games" class="scores">Games Played:</div>
         <h2 class="button" onclick='resetScores();'>Reset</h2>

    </div>

```

This is my CSS.

```
#player, #computer {
border: 1px solid black;
height: 100px;
width: 150px;
margin: 10px;
}

```