How to generate a new random array index in function in Javascript

Question

I'm creating a simple program in which the user tries to guess whether a "flipped coin" is heads or tails. I've written two variables:

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

A function called "runGame" was created to determine if the user input was equal to the random index:

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

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

The createReset function is called (which basically generates a reset button) and if clicked that calls another function called 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

Everything works but I've yet to figure out to have the "random" variable generate a new index. (i.e the first time, random = "heads", after reset, random = tails). Basically, how would I approach this? I've tried reinserting var random = coin[Math.floor(Math.random()*coin.length)]; inside this function which DOES choose a new random index (verified through printing it out in console) but input ALWAYS equals the initial index, regardless of what the new index is.

Here is the entire code:

<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. I also have trouble figuring out how to clear the input text value. "Input" is a variable defined in a function and I can't access that variable in the reset function.

score 0 · Answer 1 · answered Mar 18 '18 at 20:32

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

}

You are only creating a variable in the scope of the resetGame-method, so the original variable stays unchanged. The solution is simple:

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

Regarding the input variable you can just create the variable outside of the functions, leaving it empty by

var input="";

and remove the var inside your method.

score 0 · Answer 2 · answered Mar 18 '18 at 20:46

You should reset random instead of recreating a random variable in your reset method.

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

How to generate a new random array index in function in Javascript

2 Answers2