javascript - Rock, paper scissors. images not working -

javascript - Rock, paper scissors. images not working -

hi trying set images computer stone paper scissors game having problem , wont work don't know going wrong. , when set images in have take away alert out of code work include javascript , html , fiddle. having lot of problem stuck , 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 + ". 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]; homecoming computerchoice; } function compare(choice1, choice2) { if (choice1 == choice2) { scores[0]++; scores[3]++; homecoming (" draw both picked same! seek again!"); } else if (choice1 == "rock") { if (choice2 == "scissors") { scores[1]++; scores[3]++; homecoming ("you win!"); } else { scores[2]++; scores[3]++; homecoming ("you lose!"); } } else if (choice1 == "paper") { if (choice2 == "rock") { scores[1]++; scores[3]++; homecoming ("you win!"); } else if (choice2 == "scissors") { scores[2]++; scores[3]++; homecoming ("you lose!"); } } else if (choice1 == "scissors") { if (choice2 == "rock") { scores[2]++; scores[3]++; homecoming ("you lose!"); } else if (choice2 == "paper") { scores[1]++; scores[3]++; homecoming ("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 html.

<div style="text-align: center;"> <div id="optionspanel"> <h1 class="title">let's play stone / 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 css.

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

here 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 + ". computer chose " + choice2 + "! " + compare(choice1, choice2);

after adding <div id="message"></div> page

i renamed picks userpics , changed execution userpicks("rock") userpick(0) / (1) , (2) need 1 array

here extended version decide images in associative array.

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

note changes userpicks(1) 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"]; // can add together "spock" if want var num = [math.floor(math.random() * choices.length)] homecoming choices[num]; }

javascript html image