javascript - var 不更新，count 不更新-6ren

javascript - var 不更新，count 不更新

转载作者：行者123 更新时间：2023-11-30 16:38:29

我创建了一个简单的 JavaScript 石头剪刀布蜥蜴游戏。我遇到的问题是:

var computerChoice 在每次页面加载时设置一次。对于多次按下按钮，它保持不变，直到页面刷新。
赢/输/平局计数不会更新。

我的代码:

<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>

最佳答案

代码有几个问题:

您应该以分号结束每个语句。
您不应多次声明变量。
最好将所有 JS 放在一起(最好放在一个单独的文件中)，而不是将其分散在 HTML 中 <script>标签。
使用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。现在我要玩一会儿:)

关于javascript - var 不更新，count 不更新，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32360496/

文章推荐： c# - 如何通过 websocket 将音频发送到 Nexmo Voice

文章推荐： javascript - 为 javascript 创建正则表达式

文章推荐： javascript - 你如何每秒将一个 div 附加到一个容器？

php - Mysql SELECT WHERE $VAR IN $VAR,$VAR,$VAR
这个问题已经有答案了: Can I bind an array to an IN() condition in a PDO query? (23 个回答) 已关闭 5 年前。任何人都可以看到我如何在
linux - "var=${var:-word}"和 "var=${var:=word}"有什么区别？
我阅读了关于此的 bash 手册页，但我不明白其中的区别。我对它们进行了测试，它们似乎产生了完全相同的结果。如果值不是通过命令行参数设置的，我想设置一个变量的默认值。 #!/bin/bash var
PHP/MySQL SET var = var - var
我为我的网站开了一家商店，并让它运行起来，但我意识到它无法正确购买商品。换句话说，您不会走进一家商店，拿起一件商品，购买，再次购买，购买，再次购买，等等，以获得想要的数量。你一次捕获他们。我的网站缺少
c - 将 &var 传递给 *var 和将 var 传递给 var 有什么区别？
基本上，我想知道为什么会这样(将列表的内存地址作为参数传递): void init_lista (elemPtr *list) { *list = NULL; } int main(){
javascript - "+var === +var"在内部如何工作以验证 var 是否为数字？
看到这个问题:Is there a (built-in) way in JavaScript to check if a string is a valid number?还有这个:jsperf ，其
java正则表达式用{var}次{var}px替换{var}px
我有以下字符串: 我想用正则表达式替换所有后面有 px 的数字，并用 X 乘以它们的值。 (X 是一个变量)。所以如果X=3，结果就是请注意 X 必须是我将检索到函数的变量最佳答案以下代码
java - while (var != var)
这个问题在这里已经有了答案: 关闭 13 年前。同时 (var != var) System.out.println("循环.."); 执行它..如何声明..var
java - "var &= expr"的行为不像 "var = var && expr"
我只是好奇。我想知道表达式是否有特定原因 var &= expr 行为方式与不同 var = var && expr. 看起来第一个表达式中的表达式正在执行，而不管 var 上的 false 值。我
ruby - 为什么 Ruby 为 "var = var + 1"而不是 "var = var + 0"创建一个新对象？
我有这个 Ruby 代码: var1 = 10 puts var1.object_id var1 = var1 + 0 puts var1.object_id var1 = var1 + 1 puts
c++ - 如何从 `var (*)(void*, var)` 中获取 C 指针(如 `boost::function` )？
这个问题在这里已经有了答案: 关闭 10 年前。 Possible Duplicate: demote boost::function to a plain function pointer 所以我
javascript - 将 var 分配给临时 var 不会阻止原始 var 发生变化
好吧，堆栈溢出，我花了几个小时来解决 javascript 中的问题(在 NodeJS 服务器中编写)，但我真的不明白。这就是发生的事情: var data = {x: 50}; var temp
php - 鉴于 $var = 1，$var = $var === 0 为何不返回 false？
首先，我在这里处理 1 和 0，我很清楚 1 == true 和 0 == false。但是我很好奇为什么这不起作用: $var = 1; echo $var; /* 1 */ $var = $var
bash - Bash shell 中的 ${var}、 "$var"和 "${var}"之间有什么区别？
标题说的是什么:将变量封装在 {}、"" 或 "{}"中是什么意思？我无法在网上找到关于此的任何解释 - 除了使用不会产生任何结果的符号外，我无法引用它们。这是一个例子: declare -a gr
javascript - 我如何在 $(var).*** var ="#tag",html jquery 中发送 var
我需要将信息发送到我的 Html。例如 $(document).ready(function() { var = "'#"+result.tag+"'" // var = '#tag_dinamy
linux - bash 脚本 : combine var=$(. ..) 和 var=${var%%...} 行？
是否可能，如果可以，如何将以下表达式转换为一行？ DEV=$(lsblk -no KNAME,MODEL | grep 'ModelNAME') DEV=${DEV%%'ModelNAME'} 简单的
php - isset($var) == "Test"和 isset($var) && $var == 'Test"有什么区别
isset($var) == "Test" 和 isset($var) && $var == 'Test" 有什么区别？最佳答案这里是一个简短的例子: $var = "Chuck Test"; v
php - isset($var) == "Test"和 isset($var) && $var == 'Test"有什么区别
isset($var) == "Test" 和 isset($var) && $var == 'Test" 有什么区别？最佳答案这里是一个简短的例子: $var = "Chuck Test"; v
javascript - 正则表达式匹配 : b: and c: in [Object a:var b:var c:var];
如果我有一个字符串:[Object a:var b:var c:var]; 如何将 a:、b: 和 c: 与正则表达式匹配？我试过:\[.+\s+(.+:).+\] 但它不适用于 a、b 和 c，它
c++ - 使用 "if (var = 0 || var == 0)"语句将 var 更改为 1
这个问题在这里已经有了答案: Why does this if-statement combining assignment and an equality check return true? (
Powershell - if $var -like $var*
我正在 Powershell 中使用 SCSM，但遇到了 if 语句的问题。我有一个函数，它根据作为变量传递给函数的条件收集数据。例子: $JMLs1 = collectTickets -crit

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - var 不更新，count 不更新