Var不更新，计数不更新

时间：2015-09-02 18:22:03

标签： javascript

我创建了一个简单的javascript摇滚，纸，剪刀，蜥蜴，spock游戏。我遇到的问题是：

  1. var computerChoice每页加载一次。在按下多个按钮之前，它保持不变，直到刷新页面。

  2. 赢/输/领带数不会更新。

    3. 我的代码：

    <h1>Rock, Paper, Scissors, Lizard, Spock</h1><br>
<div id="user-choice">
    <button id="Rock" value="Rock" onclick="choose('Rock')"><i class="fa fa-hand-rock-o fa-3x"></i></button>
    <button id="Paper" value="Paper" onclick="choose('Paper')"><i class="fa fa-hand-paper-o fa-3x"></i></button>
    <button id="Scissors" value="Scissors" onclick="choose('Scissors')"><i class="fa fa-hand-scissors-o fa-3x"></i></button>
    <button id="Lizard" value="Lizard" onclick="choose('Lizard')"><i class="fa fa-hand-lizard-o fa-3x"></i></button>
    <button id="Spock" value="Spock" onclick="choose('Spock')"><i class="fa fa-hand-spock-o fa-3x"></i></button>
</div>

<div id="results">
<br>
<br>

<span id="win"></span><br>
<span id="lose"></span><br>
<span id="tie"></span><br>
<script>
var win = 0
var lose = 0
var tie = 0

document.getElementById("win").textContent = 'Wins: ' + win
document.getElementById("lose").textContent = 'Losses: ' + lose
document.getElementById("tie").textContent ='Ties: ' + tie
</script>




<script>
var win = 0
var lose = 0
var tie = 0 

var computerChoice = Math.random();
if (computerChoice <= 0.2) {
    computerChoice = "Rock";
} else if (computerChoice <= 0.4) {
    computerChoice = "Paper";
} else if (computerChoice <= 0.6) {
    computerChoice = "Scissors";
} else if (computerChoice <= 0.8) {
    computerChoice = "Lizard";
} else {
    computerChoice = "Spock";
}


var playerChoice;
function choose(choice){
    playerChoice = choice;
    alert("I chose " + computerChoice + ".");

// Rock Outcomes
if (playerChoice == computerChoice) {
    alert("It's a tie!");
    tie++;
} else if (playerChoice == 'Rock' && computerChoice == 'Paper') {
    alert(computerChoice + ' covers ' + playerChoice + '. I win!');
    lose++;
} else if (playerChoice == 'Rock' && computerChoice == 'Spock') {
    alert(computerChoice + ' vaporises ' + playerChoice + '. I win!');
    lose++;
} else if (playerChoice == 'Rock' && computerChoice == 'Lizard') {
    alert(playerChoice + ' crushes ' + computerChoice + '. You win!');
    win++;
} else if (playerChoice == 'Rock' && computerChoice == 'Scissors') {
    alert(playerChoice + ' crushes ' + computerChoice + '. You win!');
    win++;
}
// End Rock Outcomes

// Paper Outcomes
 else if (playerChoice == 'Paper' && computerChoice == 'Scissors') {
    alert(computerChoice + ' cuts ' + playerChoice + '. I win!');
    lose++;
} else if (playerChoice == 'Paper' && computerChoice == 'Lizard') {
    alert(computerChoice + ' eats ' + playerChoice + '. I win!');
    lose++;
} else if (playerChoice == 'Paper' && computerChoice == 'Rock') {
    alert(playerChoice + ' covers ' + computerChoice + '. You win!');
    win++;
} else if (playerChoice == 'Paper' && computerChoice == 'Spock') {
    alert(playerChoice + ' disproves ' + computerChoice + '. You win!');
    win++;
}
// End Paper Outcomes

// Scissors Outcomes
 else if (playerChoice == 'Scissors' && computerChoice == 'Rock') {
    alert(computerChoice + ' crushes ' + playerChoice + '. I win!');
    lose++;
} else if (playerChoice == 'Scissors' && computerChoice == 'Spock') {
    alert(computerChoice + ' smashes ' + playerChoice + '. I win!');
    lose++;
} else if (playerChoice == 'Scissors' && computerChoice == 'Paper') {
    alert(playerChoice + ' cuts ' + computerChoice + '. You win!');
    win++;
} else if (playerChoice == 'Scissors' && computerChoice == 'Lizard') {
    alert(playerChoice + ' decapitates ' + computerChoice + '. You win!');
    win++;
}
// End Scissors Outcomes

// Lizard Outcomes
 else if (playerChoice == 'Lizard' && computerChoice == 'Rock') {
    alert(computerChoice + ' crushes ' + playerChoice + '. I win!');
    lose++;
} else if (playerChoice == 'Lizard' && computerChoice == 'Scissors') {
    alert(computerChoice + ' decapitates ' + playerChoice + '. I win!');
    lose++;
} else if (playerChoice == 'Lizard' && computerChoice == 'Paper') {
    alert(playerChoice + ' eats ' + computerChoice + '. You win!');
    win++;
} else if (playerChoice == 'Lizard' && computerChoice == 'Spock') {
    alert(playerChoice + ' poisons ' + computerChoice + '. You win!');
    win++;
}
// End Lizard Outcomes

// Spock Outcomes
 else if (playerChoice == 'Spock' && computerChoice == 'Paper') {
    alert(computerChoice + ' disproves ' + playerChoice + '. I win!');
    lose++;
} else if (playerChoice == 'Spock' && computerChoice == 'Lizard') {
    alert(computerChoice + ' poisons ' + playerChoice + '. I win!');
    lose++;
} else if (playerChoice == 'Spock' && computerChoice == 'Rock') {
    alert(playerChoice + ' vaporises ' + computerChoice + '. You win!');
    win++;
} else if (playerChoice == 'Spock' && computerChoice == 'Scissors') {
    alert(playerChoice + ' smashes ' + computerChoice + '. You win!');
    win++;
}
// End Scissors Outcomes
}

</script>

<div id="results">
<br>
<br>

<span id="win"></span><br>
<span id="lose"></span><br>
<span id="tie"></span><br>
<script>


document.getElementById("win").textContent = 'Wins: ' + win
document.getElementById("lose").textContent = 'Losses: ' + lose
document.getElementById("tie").textContent ='Ties: ' + tie
</script>

1 个答案:

答案 0 :(得分：2)

代码有几个问题：

  • 您应该用分号终止每个语句。
  • 您不应多次声明变量。
  • 最好将所有JS放在一起（理想情况下是在一个单独的文件中），而不是将它放在<script>标记内的HTML周围。
  • 最好使用CSS来修复格式，而不是使用<br>标签在元素之间留出空间。

但最重要的是你需要将所有计算的代码包装成一个函数，每次用户进行选择时都会调用它，因此计算机选择和计数器都会更新。

试试这个代码段。

var win = 0;
var lose = 0;
var tie = 0;

function UpdateCounter() {
  document.getElementById("win").textContent = 'Wins: ' + win;
  document.getElementById("lose").textContent = 'Losses: ' + lose;
  document.getElementById("tie").textContent = 'Ties: ' + tie;
}

function ComputerChoice() {
  var computerChoice = Math.random();
  if (computerChoice <= 0.2) {
    computerChoice = "Rock";
  } else if (computerChoice <= 0.4) {
    computerChoice = "Paper";
  } else if (computerChoice <= 0.6) {
    computerChoice = "Scissors";
  } else if (computerChoice <= 0.8) {
    computerChoice = "Lizard";
  } else {
    computerChoice = "Spock";
  }
  return computerChoice;
}

function choose(choice) {

  var playerChoice = choice;
  var computerChoice = ComputerChoice();

  alert("I chose " + computerChoice + ".");

  // Rock Outcomes
  if (playerChoice == computerChoice) {
    alert("It's a tie!");
    tie++;
  } else if (playerChoice == 'Rock' && computerChoice == 'Paper') {
    alert(computerChoice + ' covers ' + playerChoice + '. I win!');
    lose++;
  } else if (playerChoice == 'Rock' && computerChoice == 'Spock') {
    alert(computerChoice + ' vaporises ' + playerChoice + '. I win!');
    lose++;
  } else if (playerChoice == 'Rock' && computerChoice == 'Lizard') {
    alert(playerChoice + ' crushes ' + computerChoice + '. You win!');
    win++;
  } else if (playerChoice == 'Rock' && computerChoice == 'Scissors') {
    alert(playerChoice + ' crushes ' + computerChoice + '. You win!');
    win++;
  }
  // End Rock Outcomes

  // Paper Outcomes
  else if (playerChoice == 'Paper' && computerChoice == 'Scissors') {
    alert(computerChoice + ' cuts ' + playerChoice + '. I win!');
    lose++;
  } else if (playerChoice == 'Paper' && computerChoice == 'Lizard') {
    alert(computerChoice + ' eats ' + playerChoice + '. I win!');
    lose++;
  } else if (playerChoice == 'Paper' && computerChoice == 'Rock') {
    alert(playerChoice + ' covers ' + computerChoice + '. You win!');
    win++;
  } else if (playerChoice == 'Paper' && computerChoice == 'Spock') {
    alert(playerChoice + ' disproves ' + computerChoice + '. You win!');
    win++;
  }
  // End Paper Outcomes

  // Scissors Outcomes
  else if (playerChoice == 'Scissors' && computerChoice == 'Rock') {
    alert(computerChoice + ' crushes ' + playerChoice + '. I win!');
    lose++;
  } else if (playerChoice == 'Scissors' && computerChoice == 'Spock') {
    alert(computerChoice + ' smashes ' + playerChoice + '. I win!');
    lose++;
  } else if (playerChoice == 'Scissors' && computerChoice == 'Paper') {
    alert(playerChoice + ' cuts ' + computerChoice + '. You win!');
    win++;
  } else if (playerChoice == 'Scissors' && computerChoice == 'Lizard') {
    alert(playerChoice + ' decapitates ' + computerChoice + '. You win!');
    win++;
  }
  // End Scissors Outcomes

  // Lizard Outcomes
  else if (playerChoice == 'Lizard' && computerChoice == 'Rock') {
    alert(computerChoice + ' crushes ' + playerChoice + '. I win!');
    lose++;
  } else if (playerChoice == 'Lizard' && computerChoice == 'Scissors') {
    alert(computerChoice + ' decapitates ' + playerChoice + '. I win!');
    lose++;
  } else if (playerChoice == 'Lizard' && computerChoice == 'Paper') {
    alert(playerChoice + ' eats ' + computerChoice + '. You win!');
    win++;
  } else if (playerChoice == 'Lizard' && computerChoice == 'Spock') {
    alert(playerChoice + ' poisons ' + computerChoice + '. You win!');
    win++;
  }
  // End Lizard Outcomes

  // Spock Outcomes
  else if (playerChoice == 'Spock' && computerChoice == 'Paper') {
    alert(computerChoice + ' disproves ' + playerChoice + '. I win!');
    lose++;
  } else if (playerChoice == 'Spock' && computerChoice == 'Lizard') {
    alert(computerChoice + ' poisons ' + playerChoice + '. I win!');
    lose++;
  } else if (playerChoice == 'Spock' && computerChoice == 'Rock') {
    alert(playerChoice + ' vaporises ' + computerChoice + '. You win!');
    win++;
  } else if (playerChoice == 'Spock' && computerChoice == 'Scissors') {
    alert(playerChoice + ' smashes ' + computerChoice + '. You win!');
    win++;
  }
  // End Scissors Outcomes
  
  UpdateCounter();
}
<h1>Rock, Paper, Scissors, Lizard, Spock</h1>
<br>
<div id="user-choice">
  <button id="Rock" value="Rock" onclick="choose('Rock')"><i class="fa fa-hand-rock-o fa-3x">Rock</i>
  </button>
  <button id="Paper" value="Paper" onclick="choose('Paper')"><i class="fa fa-hand-paper-o fa-3x">Paper</i>
  </button>
  <button id="Scissors" value="Scissors" onclick="choose('Scissors')"><i class="fa fa-hand-scissors-o fa-3x">Scissors</i>
  </button>
  <button id="Lizard" value="Lizard" onclick="choose('Lizard')"><i class="fa fa-hand-lizard-o fa-3x">Lizard</i>
  </button>
  <button id="Spock" value="Spock" onclick="choose('Spock')"><i class="fa fa-hand-spock-o fa-3x">Spock</i>
  </button>
</div>

<div id="results">
  <br><br>
  <span id="win"></span>
  <br>
  <span id="lose"></span>
  <br>
  <span id="tie"></span>
  <br>
</div>

无论如何，主题为+1。现在我要玩一段时间了:)）

相关问题
最新问题