剪刀石头布。 图像不起作用

Question

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

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;
}

Answer 1

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

I would probably change the above to something like this:

//playerId would be the html id mapping to "computer" or "player"
function updateImage(playerId, choiceIndex) {
    var choices = ['image1.gif', 'image2.gif', 'image3.gif'];
    var computerImageTemplate = '<img src="{image_placeholder}" />';
    var imageMarkup = computerImageTemplate.replace("{image_placeholder}", choices[choiceIndex]);
    document.getElementById(playerId).innerHTML = imageMarkup;
}

You are currently getting errors since you are building a string which looks like this:

<img='rps-paper<img='rsp-rock<img='rps-scissorsCHOICE_HERE.gif/>

It should be more like

<img src="CHOICE_HERE.gif" />

You can check this by looking in the DOM explorer (right click and inspect in browser) to see what kind of output you are generating.

Answer 2

Here is my version

Fiddle

function userPicks(id) {
   var choice1 =  differentOptions[id];
   var choice2 = computerGenerate();
   var imagePlayer = "<img src='rps-"+ choice1 + ".gif' title='"+choice1+"' />";
   var imageComputer = "<img src='rps-"+choice2 + ".gif' title='"+choice2+"' />";

   document.getElementById("message").innerHTML="You chose " + choice1 + ". The computer chose " + choice2 + "! " + compare(choice1, choice2);

after adding a <div id="message"></div> to the page

I renamed Picks to userPics and changed the execution from userPicks("rock") to userPick(0) / (1) and (2) so we only need one array

---

Here is an extended version where you decide the images in an associative array.

var differentOptions = {
  "rock":   "rock.jpg",
  "paper": "paper.jpg",
  "scissors":"http://upload.wikimedia.org/wikipedia/commons/1/18/Skalm_2.JPG"
}

Note the changes to the userPicks(1) back to userPics("rock")

FIDDLE

function userPicks(choice1) {
   var choice2 = computerGenerate();
   var imagePlayer = "<img width='90%' height='90%' src='"+ differentOptions[choice1] + "' title='"+choice1+"' />";
   var imageComputer = "<img width='90%' height='90%' src='"+differentOptions[choice2] + "' title='"+choice2+"' />";

using

function computerGenerate() {
  var choices = ["rock","paper","scissors"]; // now you can add "spock" if you want
  var num = [Math.floor(Math.random() * choices.length)]
  return choices[num];
}