javascript - 如何使用带有 jQ​​uery 或 JavaScript 的按钮刷新变量

Question

JSFiddle 版本无法正常工作，所以我添加了一个 codepen Working Codepen

我是 JavaScript 和 jQuery 的新手，所以如果我的措辞不太正确或者答案非常明显，我深表歉意，我是来学习的:) 所以我制作了一个剪刀石头布游戏，除了我的“新游戏”按钮外，一切都很好。我不知道如何刷新变量“computerChoice”。我已经能够设置它以便页面刷新，但这不是我想要实现的。我想要它，以便当您单击“新游戏”时，变量“computerChoice”将根据随机数选择一个新选项，就像您刷新页面时一样。我试过在您点击“新游戏”时将其设置为 null，但是当您开始玩游戏时它只会返回数字。

HTML:

<h1>Rock Paper Scissors</h1>
<h2>Pick your weapon!</h2>
<p><button id="refresh">New Game</button></p>
<button onClick='choose("rock")' class="choices">Rock</button>
<button onClick='choose("paper")' class="choices">Paper</button>
<button onClick='choose("scissors")' class="choices">Scissors</button>
<p><button onClick='compare(user, computerChoice)' class="compares">1...2...3...</button></p>
<p><b id="you">...</b> Vs. 
<b id="computer">...</b></p>
<p><b id="results"></b></p>

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);
});

JSFiddle 版本不工作，所以我添加了一个 codepen Working Codepen

Answer 1

您的代码看起来不错，但您似乎尝试将 vanilla javascript 与 JQuery 混合，并在您的 html 中添加了一些(不必要的)处理程序，这可能是测试您不同选项的一部分。

我只是稍微重构了您的代码，以便每次单击“1..2..3”按钮时它都会刷新计算机选择，并且它使用 JQuery 来处理您似乎正在使用的所有功能无论如何它已经(比如通过 JQuery 或使用 innerHTML 选项设置 html，这当然是您自己的偏好，只是拥有 1 个代码库，其中所有代码都使用类似的做事方式是很好的。

顺便说一句，codepen 或 jsfiddle 不错，但是这个网站有一个非常有效的代码片段编辑器，您还可以在其中展示它之后的样子 ;)

$(function() {
  // click function for choices
  $('.choices').on('click', function(e) {
    var choice = $(e.target).text();
    $('#you').html(choice);
    disableButtons();
  });
  
  // click function for refresh
  $('#refresh').click(function() {
    $('#results').html('');
    $('#you, #computer').html('...');
    enableButtons();
  });
  
  // click function for 1..2..3
  $('#compares').click(function() {
    var computerChoice = getComputerChoice(), user = getUserChoice();
    $('#computer').html(computerChoice);
    compare( user.toLowerCase(), computerChoice.toLowerCase() );
  });
  
  // gets the previously stored userChoice
  function getUserChoice() {
    return $('#you').text();
  }

  // gets a generated computer choice
  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 user choice to computer choice
  function compare( choice1, choice2 ) {
    var result;
    if (choice1 === choice2) {
      result = "How boring, you tied.";
    } else if (choice1 === "rock") {
      if (choice2 === "scissors") {
        result = "They'll feel that in the morning.";
      } else {
        result = "Can you breathe? I think not.";
      }
    } else if (choice1 === "scissors") {
      if (choice2 === "paper") {
        result = "Snippitysnip, you sliced them in two.";
      } else {
        result = "Ouch, looking a little blunt.";
      }
    } else if (choice1 === "paper") {
      if (choice2 === "rock") {
        result = "You smothered them, eesh!"
      } else {
        result = "You're looking a bit like a banana split."
      }
    } else {
      result = "Something's not quite right...what did you do?!"
    }
    $('#results').html(result);
  }

  // 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);
  }
});

body {
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Rock Paper Scissors</h1>
<h2>Pick your weapon!</h2>
<p>
  <button id="refresh">New Game</button>
</p>
<button class="choices">Rock</button>
<button class="choices">Paper</button>
<button class="choices">Scissors</button>
<p>
  <button id="compares">1...2...3...</button>
</p>
<p><b id="you">...</b> Vs.
  <b id="computer">...</b>
</p>
<p><b id="results"></b>
</p>