Question

我正在创建一个简单的程序，用户试图猜测“翻转的硬币”是头还是尾。我写了两个变量：

 var coin = ["heads", "tails"];
 var random = coin[Math.floor(Math.random()*coin.length)];

创建了一个名为“runGame”的函数来确定用户输入是否等于随机索引：

function runGame() {
  var input = document.getElementById('choose').value;

  if (input === random) {
    youWin();
  }
  else {
    youLose();
  }
  createReset();
  console.log(random);
}

调用createReset函数（基本上生成一个重置按钮），如果单击调用另一个名为resetGame的函数：

 function resetGame() {
  //generate new random index

  //enable 'click to flip' button
  button.disabled = false;
  //paragraph tag resets to default
  para.innerHTML = "";
  para.classList.remove("class-win");
  para.classList.remove("class-lose");
  //delete 'click to reset' button
  document.body.removeChild(resetButton);
  //clear input

一切正常但我还没想到让“随机”变量生成一个新索引。（即第一次，random =“heads”，复位后，random = tails）。基本上，我该如何处理？我试过在这个函数中重新插入var random = coin[Math.floor(Math.random()*coin.length)];，它选择一个新的随机索引（通过在控制台中打印出来验证）但是输入ALWAYS等于初始索引，无论新索引是什么。

以下是整个代码：

<h1>Heads or Tails?</h1>

<label for="choose">Enter "heads" or "tails":</label>
<br>
<input type="text" id="choose" value="">
<br><br>
<button type="button" name="button">Click to Flip!</button>

<p id="result"></p>

var coin = ["heads", "tails"];
var random = coin[Math.floor(Math.random()*coin.length)];

var para = document.querySelector("#result");
var button = document.querySelector("button");

//create reset button
var resetButton = document.createElement("button");
var text = document.createTextNode("Click to Reset")
//*****************

button.addEventListener('click', runGame);
resetButton.addEventListener('click', resetGame);

function runGame() {
  var input = document.getElementById('choose').value;

  if (input === random) {
    youWin();
  }
  else {
    youLose();
  }
  createReset();
  console.log(random);
}

function resetGame() {
  //generate new random index
  var random = coin[Math.floor(Math.random()*coin.length)];
  console.log("NEW INDEX: " + random);
  //enable 'click to flip' button
  button.disabled = false;
  //paragraph tag resets to default
  para.innerHTML = "";
  para.classList.remove("class-win");
  para.classList.remove("class-lose");
  //delete 'click to reset' button
  document.body.removeChild(resetButton);
  //clear input

}

//functions within runGame

function youWin() {
  para.innerHTML = "You Win!";
  para.classList.add("class-win");
}

function youLose() {
  para.innerHTML = "Wrong! The answer is " + random;
  para.classList.add("class-lose");
}

function createReset() {
  resetButton.appendChild(text);
  document.body.appendChild(resetButton);
  button.disabled = true;
}

P.S。我也很难弄清楚如何清除输入文本值。 “输入”是函数中定义的变量，我无法在重置函数中访问该变量。

Answer 1

function resetGame() {
  //generate new random index
  var random = coin[Math.floor(Math.random()*coin.length)];// the problem is the var
  console.log("NEW INDEX: " + random);
  //enable 'click to flip' button
  button.disabled = false;
  //paragraph tag resets to default
  para.innerHTML = "";
  para.classList.remove("class-win");
  para.classList.remove("class-lose");
  //delete 'click to reset' button
  document.body.removeChild(resetButton);
  //clear input

}

您只是在resetGame方法的范围内创建变量，因此原始变量保持不变。解决方案很简单：

random = coin[Math.floor(Math.random()*coin.length)];//without the var

关于输入变量，您可以在函数外部创建变量，将其留空

var input="";

并删除方法中的var。

Answer 2

您应重置random，而不是在重置方法中重新创建random变量。

＆＃13;

var coin = ["heads", "tails"];
var random = coin[Math.floor(Math.random()*coin.length)];

var para = document.querySelector("#result");
var button = document.querySelector("button");

//create reset button
var resetButton = document.createElement("button");
var text = document.createTextNode("Click to Reset")
//*****************

button.addEventListener('click', runGame);
resetButton.addEventListener('click', resetGame);

function runGame() {
  var input = document.getElementById('choose').value;

  if (input === random) {
    youWin();
  }
  else {
    youLose();
  }
  createReset();
  console.log(random);
}

function resetGame() {
  //generate new random index
  random = coin[Math.floor(Math.random()*coin.length)];
  console.log("NEW INDEX: " + random);
  //enable 'click to flip' button
  button.disabled = false;
  //paragraph tag resets to default
  para.innerHTML = "";
  para.classList.remove("class-win");
  para.classList.remove("class-lose");
  //delete 'click to reset' button
  document.body.removeChild(resetButton);
  //clear input

}

//functions within runGame

function youWin() {
  para.innerHTML = "You Win!";
  para.classList.add("class-win");
}

function youLose() {
  para.innerHTML = "Wrong! The answer is " + random;
  para.classList.add("class-lose");
}

function createReset() {
  resetButton.appendChild(text);
  document.body.appendChild(resetButton);
  button.disabled = true;
}

＆＃13;

如何在Javascript函数中生成一个新的随机数组索引

2 个答案: