Issues with looping and prompting user for answer

Question

I am trying to make a Rock, Paper, Scissors games but I cannot setup the game to loop round 5 times and take the input from a prompt. How do I setup my code to take a new input prompt on each cycle? and how to cycle each time.

I have tried taking the playerOutput variable of which contains the computerPlay() function data and inputting it into a prompt within the loop function but if I do this I cannot define the prompt variable

//computer choice//
function computerPlay() {
  let numberGen = Math.floor(Math.random() * 3 + 1);
  if (numberGen === 1) {
    return "rock";
  }
  if (numberGen === 2) {
    return "paper";
  }
  if (numberGen === 3) {
    return "scissors";
  }
}
const computerOutput = computerPlay();

//player choice//
function humanPlay(playerinput) {
  //this outputs our input//
  if (playerinput == "rock") {
    return "rock";
  }
  if (playerinput == "paper") {
    return "paper";
  }
  if (playerinput == "scissors") {
    return "scissors";
  }
}
const playerOutput = humanPlay();

//comparitor//
const comparitor = function playerSelection(playerOutput, computerOutput) {
  if (playerOutput === computerOutput) {
    return "tie";
  }
  if (playerOutput == "paper" && computerOutput == "scissors") {
    return "computer wins ";
  }
  if (playerOutput == "paper" && computerOutput == "rock") {
    return "You win";
  }
  if (playerOutput == "scissors" && computerOutput == "paper") {
    return "You win";
  }
  if (playerOutput == "scissors" && computerOutput == "rock") {
    return "computer wins ";
  }
  if (playerOutput == "rock" && computerOutput == "scissors") {
    return "You win";
  }
  if (playerOutput == "rock" && computerOutput == "paper") {
    return "computer wins";
  }
};
const comparitoroutput = comparitor(playerOutput, computerOutput);

// This is the bestof5 loop that computes a winner of the game //
const gameloop = function bestof5(comparitoroutput) {
  let computer = 0;
  let player = 0;

  for (let i = 0; i < 5; i++) {
    // this loops the comparatoroutput 5 times //
    if (comparitoroutput === "computer wins") {
      player++;
    } else {
      computer++;
    }
    if (player >= 3) {
      return "YOU WIN!";
    }
    if (computer >= 3) {
      return "COMPUTER WINS!";
    }
  }
};
const bestof5output = gameloop(comparitoroutput);
console.log(bestof5output);

Answer 1

This solution aims to provide a way to receive input from user 5 times using prompt(), confirm/acknowledge the input (using alert()) and after obtaining 5 inputs inform completion to the user.

// an empty array to hold inputs from the user
const userInputs = [];

// iterate until the array has 5 elements (indices 0, 1, 2, 3, 4)
while (userInputs.length < 5) {
  // "prompt()" the user for their input
  const inputText = (prompt("Please enter choice: ")).toString();
  // use "alert()" to acknowledge user-input
  alert(`Round ${userInputs.length + 1} started...`);
  // Very-Crucial: Add (ie, ".push()") the user-input to the array
  userInputs.push(inputText);
  // after reach "push" the "length" property of "userInputs" automatically increases
};

// log all the user-inputs to console
console.log("User Inputs are: ", JSON.stringify(userInputs));

// alert the user of all their inputs
alert(JSON.stringify(userInputs));

Below does the same thing, using <input> and <button> UI elements.

// empty array that will hold user inputs
const userInputs = [];

// when user types an input, enable "Play" button
// if input has at least one character
const handleInputChange = () => {
  if (document.getElementById("inputText").value?.length > 0) {
    document.getElementById("btnPlay").disabled = "";
  } else {
    document.getElementById("btnPlay").disabled = "disabled";
  }
};

// when user clicks "Play" button
const handleClick = () => {
  // track the HTML-element "results"
  const res = document.getElementById("results");
  // track the HTML-element "inputText"
  const inputElt = document.getElementById("inputText");
  // "push" the input-text to the "userInputs" array
  userInputs.push(inputElt.value);
  // update the "result" area in the UI
  if (res.innerText === 'None') res.innerText = inputElt.value;
  else res.innerText += "\n" + inputElt.value;
  // reset the input to be empty
  inputElt.value = "";
  // disable the "Play" button
  document.getElementById("btnPlay").disabled = "disabled";
  // disable "input" when 5 inputs have been processed.
  if (userInputs.length >= 5) {
    document.getElementById("inputText").disabled = "disabled";
    res.innerHTML += "<br/><br/>*** <b>Five Inputs collected !</b> ***"
  };
};

.outerDiv {
  background-color: lightblue;
  width: 50%;
  border: 4px double darkblue;
  padding: 5px 15px;
}

.btnStyle {
  margin: 10px;
  background-color: #DDF;
  font-size: large;
  border-radius: 10px;
  padding: 5px;
}

<div>
  <div class="outerDiv">
    <h4>Demo - Handling User Input</h4>
    <div>
      <label for="inputText">Enter choice: <label>
      <input id="inputText" onkeyup="handleInputChange()" />
    </div>
    <button class="btnStyle" id="btnPlay" disabled onclick="handleClick()">Play</button>
    <div id="resultsDiv">
      <h4>User Inputs are</h4>
      <p id="results">None</p>
    </div>
  </div>
</div>

Note / Disclaimer: I'm fairly new to JS. Ergo, any corrections / best-practices may need to be incorporated to the above code-snippets.