html - Javascript Counters Not Working -

going through rounds making simple rock paper scissors game in javascript. game functions correctly, none of counters working. want count number of wins/losses/ties , count down 10 amount of rounds played (i'll add loop later ends game when counter reaches zero). i've moved these counters in , out of functions, moved them around in if/else statements , i'm @ point need tell me put them or do, because nothing seems working.

the code messy, know , i'm sorry, made mistake of tweaking , retweaking , moving things around , not saving original. know have counters in multiple places, can't them work no matter put them though, left them in both functions now. if me counters working (or @ least 1 of them , explain i'm doing wrong rest) appreciate it. thanks!

here jsfiddle: http://jsfiddle.net/nbxk4ofo/1/ (thanks tip!) here's relevant code:

html

<div id="gamescreen">     <img src="image/logo.png" />     <br />     <hr />     <h3>you play 10 rounds against computer , i'll keep score!<br /><br />       wins: <span id="wins">0</span>     <br />     losses: <span id="losses">0</span>     <br />     ties: <span id="ties">0</span>     <br />     <br />       current game: <br /><br />     <span id="whowon">      </span>      <br /><br />     you've got     <span id="triesleft"></span>     tries left!     <br />     <br />      <br />      select weapon!<br /><br />      <img src="image/rock1.jpg" name="rock" onclick ="playgame('rock');" onmouseover="over(0)" onmouseout="out(0)">     <img src="image/paper1.jpg" name="paper" onclick ="playgame('paper');" onmouseover="over(1)" onmouseout="out(1)">     <img src="image/scissors1.jpg" name="scissors" onclick ="playgame('scissors');" onmouseover="over(2)" onmouseout="out(2)">     </h3>   

javascript

var revert = new array(); var inames = new array('rock', 'paper', 'scissors'); var useroption = ""; var triesleft = 10; var wins = 0; var ties = 0; var losses = 0; var results; var computerselection;   //main function game logic function playgame(userselect) {  useroption = userselect;  var computerselection = math.random();  if (computerselection < 0.34) {     computerselection = "rock";  } else if (computerselection < 0.67) {     computerselection = "paper"; } else {     computerselection = "scissors"; }  results = comparechoices(useroption, computerselection);  document.getelementbyid("result").innerhtml = "<p>the computer chose " +     computerselection; document.getelementbyid("whowon").innerhtml = results;   document.getelementbyid("triesleft").innerhtml = triesleft; }   function updatescore(results) { var ties = document.getelementbyid("ties"); var wins = document.getelementbyid("wins"); var losses = document.getelementbyid("losses");  if (results === "tie") {     ties++;     ties.innerhtml = ties; }  if (results === "win") {     wins++;     wins.innerhtml = wins; }  if (results === "lose") {     losses++;     losses.innerhtml = losses; } }   function comparechoices(useroption, computerselection) {  if (computerselection == "rock") {     document.getelementbyid("imageresult").setattribute("src", "image/rock2.jpg"); }  if (computerselection == "paper") {     document.getelementbyid("imageresult").setattribute("src", "image/paper2.jpg"); }  if (computerselection == "scissors") {     document.getelementbyid("imageresult").setattribute("src",     "image/scissors2.jpg"); }    if (useroption == computerselection) {     ties++;     updatescore("tie")     return "it's tie!";  }  if (useroption == "rock") {     if (computerselection == "scissors")     {         wins++;         updatescore("win")         return "you win!";      }         else         {         losses++;         updatescore("lose")         return "you lose!";      }   } else if (useroption == "paper") {      if (computerselection == "rock")     {         wins++;         updatescore("win")         return "you win!";      } else if ("scissors") {         updatescore("lose")         losses++;         return "you lose!";      }  } else if (useroption == "scissors") {      if (computerselection == "rock")     {         losses++;         updatescore("lose")         return "you lose!";      }else{          wins++;         updatescore("win")         return "you win!";      } } }   

in updatescore() defining variables ties, wins , losses html node elements. since these variables called same counters in global context, can't access counters updatescore(), since inner context has precedence on outer one.

moreover, since try use wins first number and object, nothing gets done:

if (results === "win") {     wins++;                // treat inner wins number, becomes nan     wins.innerhtml = wins; // treat nan wins object, result undefined } 

and same happens other counters.

once fix code below, notice counters increase 2 units each time. because increase counters on comparechoices, solution not try increase counters in updatescore:

function updatescore(results) {      if (results === "tie") {         document.getelementbyid("ties").innerhtml = ties;     }      if (results === "win") {         document.getelementbyid("wins").innerhtml = wins;     }      if (results === "lose") {         document.getelementbyid("losses").innerhtml = losses;         } } 

you need update triesleft, can in playgame's last line:

document.getelementbyid("triesleft").innerhtml = --triesleft; 

and can prevent player playing there no more tries left:

function playgame(userselect) {     if (triesleft == 0) {         alert("no more tries left!");         return;     }       // rest of function... } 

that should it.