2014-11-07 72 views
0

我遇到了一個問題,其中的選擇根本沒有更新。我已經列出了每次選擇後最後的結果和當前得分應該出現在哪裏。分數工作正常,但選擇沒有更新。謝謝。使用Javascript的問題岩石,紙張,剪刀像遊戲

<html> 
<head> 
<title> Dynamic Web </title> 
</head> 

<body> 


<div class="container"> 

<a class="contents content1"> 

    <h1>Squirtle, Charmander, Bulbasuar</h1> 

    <div class="p-r-s"> 

     <div class="one_three"> 

      <h3>Take your pick</h3> 

      <ul class="choices"> 
       <li> 
        <a onclick="compare('Squirtle', computerChoice)"> 
         <img src="assets/img/paper.png" width="50px" /> 
        </a> 
       </li> 

       <li> 
        <a onclick="compare('Charmander', computerChoice)"> 
         <img src="assets/img/rock.png" width="50px" /> 
        </a> 
       </li> 

       <li> 
        <a onclick="compare('Bulbasuar', computerChoice)"> 
         <img src="assets/img/scissors.png" width="50px" /> 
        </a> 
       </li> 
      </ul> 

     </div> <!-- one_three --> 

     <div> 

       <h3>Scores</h3> 

       <div class="scores"> 

        <div class="score-box"> 

         <div id="playerScore"></div><!-- .computerScore --> 

         <span>Player</span> 

        </div><!-- score-box --> 

        <div class="score-box"> 

         <div id="computerScore"></div><!-- .computerScore --> 

         <span>Computer</span> 

        </div><!-- score-box --> 

      </div><!-- .scores --> 

     </div> <!-- two_three --> 


     <div> 

      <h3>Choices</h3> 

      <ul class="decider"> 

       <li> 

         <span>Player:</span> 
         <span id="playerChoice">Pick one to get started!</span><!-- .playerChoice --> 

       </li> 

       <li> 

         <span>Computer:</span> 
         <span id="computerChoice">You first!</span><!-- .computerChoice --> 

       </li> 


      </ul> 

     </div> 

</div> <!-- .row --> 

的Javascript

<script type="text/javascript" > 

var computerScore = 0 
var playerScore = 0 

// INSERT SCORES 
var playerScoreBox = document.getElementById('playerScore'); 
var computerScoreBox = document.getElementById('computerScore'); 

playerScoreBox.innerHTML = computerScore; 
computerScoreBox.innerHTML = playerScore; 

var playerChoice = document.getElementById('playerChoice'); 
var computerChoice = document.getElementById('computerChoice') 


function compare(choice1, choice2) { 

    choice2 = Math.random(); 
    if (choice2 < 0.34) { 
     choice2 = "Charmander"; 
    } else if(choice2 <= 0.67) { 
     choice2 = "Squirtle"; 
    } else { 
     choice2 = "Bulbasuar"; 
    } 

    playerChoice = choice1; 
    computerChoice = choice2; 


    if (choice1 == choice2) { 
     return false; 
    } 
    if (choice1 == "Charmander") { 
     if (choice2 == "Bulbasuar") { 

      playerScore++;   
     } 
     else { 
      computerScore++; 
     } 
     return updateScores(); 
    } 
    if (choice1 == "Squirtle") {  
     if (choice2 == "Charmander") { 
      playerScore++; 
     } 
     else { 
      computerScore++; 
     } 
     return updateScores(); 
    } 
    if (choice1 == "Bulbasuar") { 

     if (choice2 == "Charmander") { 
      computerScore++; 
     } 
     else { 
      playerScore++; 
     } 
     return updateScores(); 
    } 
} 

function updateScores() { 
    playerScoreBox.innerHTML = playerScore; 
    computerScoreBox.innerHTML = computerScore; 
} 

</script> 

回答

1

playerChoice = choice1;playerChoice.value = choice1;playerChoice.innerHTML = choice1;,取決於它是否是一個輸入與否。與computerChoice相同。