我的岩石，紙，剪刀遊戲不會重複正確 - 任何想法？

Question

編輯：我開始了一個JSfiddle帳戶：https://jsfiddle.net/mcgettrm/7huL5bdt/ 但似乎並沒有證明問題，因爲第一個按鈕不可點擊。 ：S

我已經得到了下面顯示的JavaScript，它只是一個岩石，紙，剪刀遊戲，允許玩家在我的網站上與計算機對戰，然後詢問用戶是否想再次玩。代碼工作正常，它告訴我誰贏了，然後詢問用戶是否想再次玩。後來我希望它能夠計算並顯示勝利和損失，但是直到我解決了以下問題。

這裏有問題：

1. 在平局的情況下，它告訴結果是用戶平局，但應該改爲按鈕「要不要再來一輪？」沒有出現 - 它只是保持「誰贏了？」但奇怪的是 - 在所有其他結果之後，此功能正常工作（我看不出代碼中的任何區別）。

2. 在其他功能對上述要點有好處的情況下（例如「Computer Won」或「User Won！」），當用戶點擊「又怎麼樣？按鈕 - 它將用戶帶回正確的位置，現在選項現在又是「搖滾」，「紙張」和「剪刀」（所有選項都正確顯示爲按鈕），但是當用戶點擊其中一個按鈕時，什麼都不會發生。

我只編寫了幾天的JavaScript代碼，你可以想象，這是我的第一個項目，所以我完全無所適從。任何見解都會很棒。

代碼：

<script> 

    var resolve = function(){ 
     if(computerChoice === userChoice){ 
      document.getElementById("rpstext").innerHTML = "It was a draw!"; 
      draw ++; 
      document.getElementById("options").innerHTML = "<button class='rpsbutton' type='button' onclick='yesPlease()'> How about another round? </button>"; 

     } 
     else if(computerChoice === "rock"){ 
      if (userChoice == "paper"){ 
       document.getElementById("rpstext").innerHTML = "You won!"; 
       document.getElementById("options").innerHTML = "<button class='rpsbutton' type='button' onclick='yesPlease()'> How about another round? </button>"; 
      } 
      else { 
       document.getElementById("rpstext").innerHTML = "Computer won!"; 
       document.getElementById("options").innerHTML = "<button class='rpsbutton' type='button' onclick='yesPlease()'> How about another round? </button>"; 
       } 
      } 
     else if(computerChoice === "paper"){ 
      if(userChoice === "scissors"){ 
       document.getElementById("rpstext").innerHTML = "You won!"; 
       document.getElementById("options").innerHTML = "<button class='rpsbutton' type='button' onclick='yesPlease()'> How about another round? </button>"; 
       } 
      else{ 
       document.getElementById("rpstext").innerHTML = "The computer won!"; 
       document.getElementById("options").innerHTML = "<button class='rpsbutton' type='button' onclick='yesPlease()'> How about another round? </button>"; 

       } 
     } 

     else if(computerChoice === "scissors"){ 
      if(userChoice === "rock"){ 
       document.getElementById("rpstext").innerHTML = "You won!"; 
       document.getElementById("options").innerHTML = "<button class='rpsbutton' type='button' onclick='yesPlease()'> How about another round? </button>"; 
       } 
      else { 
       document.getElementById("rpstext").innerHTML = "The computer won!"; 
       document.getElementById("options").innerHTML = "<button class='rpsbutton' type='button' onclick='yesPlease()'> How about another round? </button>"; 
      } 

     } 
    } 

    var computerChoice = function(){ 
     var roll = Math.random(); 
     if(roll <= 0.33){ 
     document.getElementById("rpstext").innerHTML = "Computer chooses rock!"; 
     computerChoice = "rock"; 
     document.getElementById("options").innerHTML = " <button class='rpsbutton' type='button' onclick='resolve()'> Who won? </button>"; 
     } 
     else if((roll > 0.33)&&(roll < 0.67)){ 
     document.getElementById("rpstext").innerHTML = "Computer chooses paper!"; 
     computerChoice = "paper"; 
     document.getElementById("options").innerHTML = "<button class='rpsbutton' type='button' onclick='resolve(computerChoice,userChoice)'> Who won? </button>"; 
     } 
     else { 
      document.getElementById("rpstext").innerHTML = "Computer chooses scissors!"; 
      computerChoice = "scissors"; 
      document.getElementById("options").innerHTML = " <button class='rpsbutton' type='button' onclick='resolve()'> Who won? </button>"; 
      } 
    } 
    var rock = function(){ 
     userChoice = "rock"; 
     computerChoice(); 
    } 
    var paper = function(){ 
     userChoice = "paper"; 
     computerChoice(); 
    } 
    var scissors = function(){ 
     userChoice = "scissors"; 
     computerChoice(); 
    } 


    var noThanks = function(){ 
     document.getElementById("rpstext").innerHTML = "Well you suck. Maybe you should go over to the 'essays' part of this site and hang out with all the boring people so that the rest of us can have a good time."; 
     document.getElementById("options").innerHTML = ""; 
    } 
    var yesPlease = function(){ 
     document.getElementById("rpstext").innerHTML = "Great! Which do you choose: Rock, Paper, or Scissors?"; 
     document.getElementById("options").innerHTML = "<button class='rpsbutton' type='button' onclick='rock()'>ROCK!</button> <button class='rpsbutton' type='button' onclick='paper()'>PAPER!</button> <button class='rpsbutton' type='button' onclick='scissors()'>SCISSORS!</button>"; 
    } 

    </script> 

夫婦的側問題：

是否有可能在爲了採用.innerHTML同時顯示一個字符串和一個可變值來連接？如果不是，人們如何做？我似乎無法在網上找到太多（我可能不會用正確的術語搜索）。

我很擔心這段代碼不起作用，因爲我認爲函數內部的值是本地的，用戶選擇和計算機選擇的全局值將需要解析「解析」函數來比較它們和看到誰贏了。但至少在這方面，代碼似乎起作用。我不太確定我的問題在這裏，但任何可能幫助我理解在這種情況下使用全局和局部變量的觀察/洞察力都是很好的。

Answer 1

您正在使用名稱computerChoice作爲函數和變量。當您將變量設置爲選項時，您最終將覆蓋該函數，這就是爲什麼您不能再調用它。解決這個問題的最簡單方法就是將函數的名稱改爲getComputerChoice（因此也更新了rock()，paper()和scissors()函數）。你也可以不用濫用全局變量，而是重構你的函數來返回值。

第一種方法可用於作爲小提琴進行測試here。

至於爲什麼它不能工作，如果它是一個平局，你試圖增加一個不存在的變量draw這是拋出一個錯誤，並停止你的代碼。