シンプルなJavaScriptのはさみのゲーム

ボタンをクリックすると、compOutputボックスまたはwinOutputボックスに出力したいものが表示されません。私はこのプロジェクトのほとんどをcodecademyの例から取り出し、それをWebページに実装しようとしました。私はまた、コードが実行されたら、すべてのフィールドをクリアしたいので、誰かがそれのためのコードを私にも与えることができますか？それは私が問題を抱えているだけの出力です。シンプルなJavaScriptのはさみのゲーム

var userChoice = document.getElementById('userInput').value; 
 

 
var computerChoice = Math.random(); 
 

 
\t if (computerChoice < 0.34) { 
 
\t \t computerChoice = "rock"; 
 
\t } else if (computerChoice < 0.67) { 
 
\t \t computerChoice = "paper"; 
 
\t } else { 
 
\t \t computerChoice = "scissors"; 
 
\t } 
 

 

 
function compare(choice1, choice2) { 
 
\t document.getElementById('compOutput').value = computerChoice; 
 
\t //tie 
 
\t if (choice1 === choice2) { 
 
\t \t document.getElementById('winOutput').value = "The result is a tie!"; 
 
\t } 
 
\t //choice1 rock & choice2 scissors 
 
\t else if (choice1 === "rock") { 
 

 
\t \t if (choice2 === "scissors") { 
 
\t \t \t document.getElementById('winOutput').value = "rock wins"; 
 
\t \t } 
 
\t } 
 
\t //choice1 paper & choice2 rock 
 
\t else if (choice1 === "paper") { 
 

 
\t \t if (choice2 === "rock") { 
 
\t \t \t document.getElementById('winOutput').value = "paper wins"; 
 
\t \t } else { 
 
\t \t \t document.getElementById('winOutput').value = "scissors wins"; 
 
\t \t } 
 
\t } 
 
\t //choice1 scissors 
 
\t else if (choice1 === "scissors") { 
 

 
\t \t if (choice2 === "rock") { 
 
\t \t \t document.getElementById('winOutput').value = "rock wins"; 
 
\t \t } else if (choice2 === "paper") { 
 
\t \t \t document.getElementById('winOutput').value = "scissors wins"; 
 
\t \t } 
 
\t } 
 

 
}

<body> 
 
\t <form> 
 
\t \t <table align="center"> 
 
\t \t \t <tr> 
 
\t \t \t \t <td> 
 
\t \t \t \t \t <h5>Rock, Paper, Scissors?</h5> 
 
\t \t \t \t </td> 
 
\t \t \t </tr> 
 
\t \t \t <tr> 
 
\t \t \t \t <td><input type="text" id="userInput"></td> 
 
\t \t \t </tr> 
 
\t \t \t <tr> 
 
\t \t \t \t <td> 
 
\t \t \t \t \t <h5>Computer Choice</h5> 
 
\t \t \t \t </td> 
 
\t \t \t </tr> 
 
\t \t \t <tr> 
 
\t \t \t \t <td><input type="text" id="compOutput"></td> 
 
\t \t \t </tr> 
 
\t \t \t <tr> 
 
\t \t \t \t <td> 
 
\t \t \t \t \t <h5>Winner</h5> 
 
\t \t \t \t </td> 
 
\t \t \t </tr> 
 
\t \t \t <tr> 
 
\t \t \t \t <td><input type="text" id="winOutput"></td> 
 
\t \t \t </tr> 
 
\t \t \t <tr> 
 
\t \t \t \t <td><input type="button" id="generate" value="Click Here" onclick="compare(userChoice, computerhoice)"></td> 
 
\t \t \t </tr> 
 
\t \t </table> 
 
\t </form> 
 

 

 

 
</body>

出典

2017-03-28 aa2397

私は、ボタンのクリックを検出し、あなたのコードを実行するために、JavaScriptでリスナーを使用してお勧めしたいです。 –

var winConditions = { 
 
    rock: 'scissors', 
 
    paper: 'rock', 
 
    scissors: 'paper' 
 
} 
 

 
document.getElementById('generate').onclick = function() { 
 
\t var userChoice = document.getElementById('userInput').value.toLowerCase(); 
 
\t var computerChoice = ["rock", "paper", "scissors"][Math.floor(Math.random() * 3)]; 
 

 
\t compare(userChoice, computerChoice); 
 
} 
 

 
function compare(choice1, choice2) { 
 
    document.getElementById('compOutput').innerText = choice2; 
 

 
    if (choice1 === choice2) { 
 
    result = 'The result is a tie!'; 
 
    } else if (winConditions[choice1] === choice2) { 
 
    \t result = 'Player wins!'; 
 
    } else { 
 
    \t result = 'Computer wins'; 
 
    } 
 
    
 
    document.getElementById('winOutput').value = result; 
 
}

  <body> 
 
       <form> 
 
        <table align="center"> 
 
         <tr> 
 
          <td> 
 
           <h5>Rock, Paper, Scissors?</h5> 
 
          </td> 
 
         </tr> 
 
         <tr> 
 
          <td><input type="text" id="userInput"></td> 
 
         </tr> 
 
         <tr> 
 
          <td> 
 
           <h5>Computer Choice</h5> 
 
          </td> 
 
         </tr> 
 
         <tr> 
 
          <td id="compOutput"></td> 
 
         </tr> 
 
         <tr> 
 
          <td> 
 
           <h5>Winner</h5> 
 
          </td> 
 
         </tr> 
 
         <tr> 
 
          <td><input type="text" id="winOutput"></td> 
 
         </tr> 
 
         <tr> 
 
          <td><input type="button" id="generate" value="Click Here"></td> 
 
         </tr> 
 
        </table> 
 
       </form> 
 

 

 

 
      </body>

あり

https://jsfiddle.net/1so0gou8/1/

あなたが行く=）

出典

2017-03-28 16:09:43 Ronan

ああ、伝説に感謝します。 – aa2397

あなたuserChoice variab leはページが始まるとすぐに設定されるので、常に空になります。あなたがしたいことは、代わりにボタンをクリックすると入力を読み取ることです。

だから私は、compare関数の中で次のようなもののすべてを移動します：

function compare() { 
    var userInput = document.getElementById('userInput').value; 
    var computerInput = Math.random(); 
    var result; 

    if (computerInput < .34) { 
    computerInput = 'rock'; 
    } else if (computerInput > .67) { 
    computerInput = 'paper'; 
    } else { 
    computerInput = 'scissors'; 
    } 

    // compare userInput to computerInput here. 

}

出典

2017-03-28 16:12:04

追加のボーナスとして、異なる結果で複数回クリックすることができるので、ページをリロードする必要はありません。 –

をこれは、同じシナリオを処理する別の方法です：複雑なオプションのリストについては、スイッチ/ case文を使用します。コードの実行後にフィールドを空白にする方法については、実行した後にuserInputとcompOutputの値を ""に設定するだけです。もちろん、そうすることで、実際にはcompOutputを表示していないので、実際には目的を果たしません。また、ここにはfiddleがあります。

function getUserChoice() { 
 
    var userChoice = document.getElementById('userInput').value; 
 
    return userChoice.toLowerCase(); 
 
} 
 

 
function getComputerChoice() { 
 

 
    var computerChoice = Math.random(); 
 

 
    if (computerChoice < 0.34) { 
 
    computerChoice = "rock"; 
 
    } else if (computerChoice < 0.67) { 
 
    computerChoice = "paper"; 
 
    } else { 
 
    computerChoice = "scissors"; 
 
    } 
 

 
    return computerChoice; 
 
} 
 

 
compare = function compare() { 
 
    var choice1 = getUserChoice(); 
 
    var choice2 = getComputerChoice(); 
 
    document.getElementById("compOutput").value = choice2; 
 
    var winnerEl = document.getElementById("winOutput"); 
 

 
    switch (true) { 
 
    case (choice1 === choice2): 
 
     winnerEl.value = "It's a tie!"; 
 
     break; 
 
    case (choice1 === "rock"): 
 
     switch (choice2) { 
 
     case "paper": 
 
      winnerEl.value = "Paper beats Rock - Computer wins!"; 
 
      break; 
 
     case "scissors": 
 
      winnerEl.value = "Rock beat Scissors - User wins!"; 
 
      break; 
 
     } 
 
     break; // End choice1 === rock 
 

 
    case (choice1 === "paper"): 
 
     switch(choice2){ 
 
     case "rock": 
 
      winnerEl.value = "Paper beats Rock - User wins!"; 
 
      break; 
 
     case "scissors": 
 
      winnerEl.value = "Scissors beat Paper - Computer wins!"; 
 
      break; 
 
     } 
 
     break; 
 
    case (choice1 === "scissors"): 
 
     switch(choice2){ 
 
     case "rock": 
 
      winnerEl.value = "Rock beats Scissors - Computer wins!"; 
 
      break; 
 
     case "paper": 
 
      winnerEl.value = "Scissors beats Paper - User wins!" 
 
      break; 
 
     } 
 
     break; 
 
    default: 
 
     alert("Please enter either rock, paper or scissors."); 
 
     break; 
 
    } 
 
}

<form> 
 
    <table align="center"> 
 
    <tr> 
 
     <td> 
 
     <h5>Rock, Paper, Scissors?</h5> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <input type="text" id="userInput"> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <h5>Computer Choice</h5> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <input type="text" id="compOutput"> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <h5>Winner</h5> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <input type="text" id="winOutput"> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <input type="button" id="generate" value="Click Here" onclick="compare()"> 
 
     </td> 
 
    </tr> 
 
    </table> 
 
</form>

出典

2017-03-28 16:26:18 Snowmonkey

シンプルなJavaScriptのはさみのゲーム

答えて

関連する問題