如何使用带有jQuery或JavaScript的按钮刷新变量

JSFIDLE版本不起作用，因此我添加了一个代码笔

我对JavaScript和jQuery相当陌生，所以如果我的措辞不太正确或者答案非常明显，我很抱歉，我来这里学习：）所以我构建了一个石头剪刀游戏，除了我的“新游戏”按钮之外，一切都很好。我不知道如何刷新变量“computerChoice”。我已经能够将其设置为页面将刷新，但这不是我想要实现的。我希望这样，当您单击“新建游戏”时，变量“computerChoice”将根据随机数选择一个新选项，就像刷新页面时一样。我试着在你点击“新游戏”时将其设置为null，但当你去玩游戏时，它只会返回数字

HTML:

石头剪刀
拿起你的武器！
新游戏

摇滚乐
纸张
剪刀
1…2…3

。。。Vs。

JavaScript:

//user choices
var user;
var choose = function(choice) {
user = choice;
//document.getElementById("you").innerHTML = user;
}

//computer choices
var computerChoice = Math.random();
if (computerChoice < 0.34) {
  computerChoice = "rock";
} 
else if (computerChoice < 0.67) {
  computerChoice = "paper";
} 
else {
  computerChoice = "scissors";
}

//compare user choice to computer choice
function compare(choice1, choice2) {
if (choice1 === choice2) {
  document.getElementById('results').innerHTML = "How boring, you tied.";
}  
else if (choice1 === "rock") {
  if (choice2 === "scissors") {
    document.getElementById('results').innerHTML = "They'll feel that in the morning.";
} else {
  document.getElementById('results').innerHTML = "Can you breathe? I think not.";
}
}  
else if (choice1 === "scissors") {
if (choice2 === "paper") {
  document.getElementById('results').innerHTML = "Snippitysnip, you sliced them in two.";
} else {
  document.getElementById('results').innerHTML = "Ouch, looking a little blunt.";
}
} 
else if (choice1 === "paper") {
if (choice2 === "rock") {
  document.getElementById('results').innerHTML = "You smothered them, eesh!"
} else {
  document.getElementById('results').innerHTML = "You're looking a bit like a banana split."
}
} 
else {
document.getElementById('results').innerHTML = "Something's not quite right...what did you do?!"
}
}

// refresh, clear and display computer choices and results. Disable, enable buttons.
function disableButtons() {
  $('button.choices').attr('disabled', true);
}

function enableButtons() {
  $('button.choices').attr('disabled', false);
}

$('.choices').click(function() {
  $('#you').html(user); // this works on codepen but not on jsfiddle? D:
  $('#computer').html('...');
  disableButtons();
});
$('#refresh').click(function() {
  $('#results').html('');
  $('#you, #computer').html('...');
  enableButtons();
  refreshComputer();
});
$('.compares').click(function() {
  $('#computer').html(computerChoice);
});

//用户选择
var用户；
变量选择=函数（选择）{
用户=选择；
//document.getElementById（“您”）.innerHTML=user；
}
//计算机选择
var computerChoice=Math.random（）；
如果（计算机选择<0.34）{
computerChoice=“rock”；
} 
否则如果（计算机选择<0.67）{
computerChoice=“纸张”；
} 
否则{
computerChoice=“剪刀”；
}
//比较用户选择和计算机选择
功能比较（选项1、选项2）{
如果（选项1==选项2）{
document.getElementById（'results'）.innerHTML=“真无聊，你们打成平局了。”；
}  
否则如果（选项1==“岩石”）{
如果（选项2==“剪刀”）{
document.getElementById（'results'）.innerHTML=“他们会在早上感觉到的。”；
}否则{
document.getElementById（'results'）.innerHTML=“你会呼吸吗？我想不会。”；
}
}  
否则如果（选项1==“剪刀”）{
如果（选项2==“纸张”）{
document.getElementById（'results'）.innerHTML=“Snippitysnip，您将它们切成两半。”；
}否则{
document.getElementById（'results'）.innerHTML=“哎哟，看起来有点生硬。”；
}
} 
else if（选项1==“纸张”）{
如果（选项2==“岩石”）{
document.getElementById（'results'）.innerHTML=“你扼杀了它们，eesh！”
}否则{
document.getElementById（'results'）.innerHTML=“你看起来有点像香蕉分割。”
}
} 
否则{
document.getElementById（'results'）.innerHTML=“有些地方不太对劲……你做了什么？！”
}
}
//刷新、清除和显示计算机选项和结果。禁用、启用按钮。
功能禁用按钮（）{
$（'button.choices'）.attr（'disabled'，true）；
}
功能启用按钮（）{
$（'button.choices'）.attr（'disabled'，false）；
}
$（'.choices'）。单击（函数（）{
$（'#you'）.html（user）；//这在codepen上有效，但在JSFIDLE？D上无效：
$（“#计算机”）.html（“…”）；
禁用按钮（）；
});
$（“#刷新”）。单击（函数（）{
$（'#results'）.html（''）；
$（“#你，#计算机”）.html（“…”）；
启用按钮（）；
刷新计算机（）；
});
$（'.compares'）。单击（函数（）{
$（'#computer'）.html（computerChoice）；
});

JSFIDLE版本不起作用，所以我添加了一个代码笔

---

为什么不创建一个newgame函数，并在其中给出computerChoice的值呢。 在函数之前声明变量

var computerChoice = 0

function newgame(){
computerChoice = Math.Random()
}

并在按钮上调用此函数，单击NewGame

<button onclick="newgame()">New Game</button>

新游戏

---

如果您需要其他信息，请告诉我，我将更新我的答案。首先，回答您的问题：

您可以通过将变量转换为计算变量来“刷新”（更改值）（或者换言之，创建一个函数，该函数每次执行时都会生成一个新的随机数并返回它。）查看下面的我的代码和

computerChoice

函数

继续深入细节：你（至少）做了两件错事：

与本机（内联）混合

使用内联单击处理程序

混合getElementByID和jQuery元素选择

通常，在项目中添加一个大型库而不使用它的方法和工具是没有意义的

如果您的项目中需要jQuery（可能不适用于这么简单的程序），最好使用jQuery，它可以让您更灵活地执行一些称为jQuery的操作

您应该删除内联单击处理程序，这是肯定的：

<button class="js-choices">Rock</button>
<button class="js-choices">Paper</button>
<button class="js-choices">Scissors</button>

我检查了你的代码，使它工作了。我还发现了以下问题：

如果你使用了太多的

if

s：这几乎总是一个很好的选择

您的条件中存在逻辑漏洞（在比较Math.random（）的值时）

下面剪掉的部分并不完美，但绝对是一个进步：

var用户；
$（'body'）。在（'click'，'js choices'，function（）上{
user=$（this.text（）；
$（'#you'）.html（用户）；
$（“#计算机”）.html（“…”）；
禁用按钮（）；
});
//计算机选择
函数选择（）{
var temp=Math.random（）；
如果（温度<0.34）{
返回“岩石”；
}
如果（温度>=0.34&&temp<0.67）{
返回“文件”；
}否则{
返回“剪刀”；
}
}
//比较用户选择和计算机选择
//缓存结果元素以仅访问它一次并提高性能
//命名约定说，如果变量的前面有“$”符号，则使用该变量
//jquery对象
var$results=$（“#results”）；
功能比较（用户、计算机）{
如果（用户===计算机）{
$results.text（“多么无聊，你打成平局了”）；
}否则如果（用户==“摇滚乐”）{
如果（计算机==“剪刀”）{
$results.text（“他们早上会感觉到的。”）；
}否则{
$results.text（“你会呼吸吗？我想不会吧”）；
}
}else if（用户==“剪刀”）{
如果（计算机=“纸张”）{
$results.text（“Snippitysnip，你把它们切成两半。”）；
}否则{
$results.text（“哎哟，看起来有点钝”）；
}
}else if（用户==“纸张”）{
如果（计算机==“岩石”）{
$results.text（“你扼杀了他们，eesh！”）；
}否则{
$results.text（“你看起来有点像香蕉皮”）；
}
}否则{
<button class="js-choices">Rock</button>
<button class="js-choices">Paper</button>
<button class="js-choices">Scissors</button>

$('body').on('click', '.js-choices', function() {
  choose($(this).text());
});

function choose(choice) {
  user = choice;
}