岩石，剪刀。圖像不工作

Question

嗨我想把我的圖像從我的電腦放入我的搖滾紙剪刀遊戲，但我遇到了麻煩，它只是不會工作我不知道我哪裏錯了。 以及當我把圖像放在那裏的時候，我不得不從我的代碼中取出我的警告，以便它能夠工作，我將包括我的JavaScript和我的HTML以及我的小提琴。 我遇到了很多麻煩，我真的陷入困境，真的遇到了麻煩。

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

這是我的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> 

這是我的CSS。

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

Answer 1

這裏是我的版本

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

添加<div id="message"></div>頁面

我改名精選以userPics，改變從userPicks執行（ 「石頭」），以userPick後（ 0）/（1）和（2）所以我們只需要一個陣列

---

這是一個擴展版本，您可以在關聯數組中確定圖像。

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

注意事項（1）回userPics（ 「石頭」）

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+"' />"; 

使用

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

Answer 2

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

我可能會改變上面是這樣的：

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

目前你得到錯誤，因爲你正在建設一個字符串，它看起來像這樣：

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

它應該更像

<img src="CHOICE_HERE.gif" /> 

您可以通過查看DOM瀏覽器（右鍵單擊並在瀏覽器中檢查）來查看您正在生成的輸出類型。