2

I am experimenting with JavaScript. I'm just wondering if there is a way to make a prompt a dropdown of set options that the user can choose from so that I can guarantee their choice is always the correct spelling.

// Declare variables
let gameOptions = ['rock', 'paper', 'scissors']
let cpuChoice = '';
let userChoice = '';
let cpuPoints = 0;
let userPoints = 0;
let output = '';

// While loop until either CPU or User reaches 3 points
while (userPoints < 3 && cpuPoints < 3){
  // CPU makes a choice
  cpuChoice = gameOptions[Math.floor(Math.random() * gameOptions.length)];
  // User makes a choice CAN I MAKE A DROPDOWN HERE SO THAT I DON'T NEED THE WHILE LOOP BELOW?
  userChoice = prompt('What is your choice? Enter rock, paper or scissors.');
  // While loop if user enters choice incorrectly
  while (userChoice !== 'rock' && 
          userChoice !== 'paper' && 
          userChoice !== 'scissors') {
  userChoice = prompt('Make sure you enter your choice correctly: Enter rock, paper or scissors.');
  }

  // Check whether user wins the round
  if((userChoice === 'rock' && cpuChoice === 'scissors') ||
      (userChoice === 'scissors' && cpuChoice === 'paper') ||
      (userChoice === 'paper' && cpuChoice === 'rock')) {
        // Add 1 to the user's current score
        userPoints ++;
        alert('Congratulations, you won that round!');
  }
  // No points awarded as it was a tie
  else if (userChoice === cpuChoice) {
    alert('That was a tie!');
  }
  // Add 1 to cpu's current score
  else {
    cpuPoints ++;
    alert('Ouch, you lost that round!');
  }
}

// Create post-game output
if(cpuPoints > userPoints) {
  output = `Unlucky. The game has ended. Computer scored ${cpuPoints}, you scored ${userPoints}`;
}
else {
  output = `Congratulations. The game has ended. Computer scored ${cpuPoints}, you scored ${userPoints}`;
}

// Display output as alert
alert(output);
Bergi
  • 630,263
  • 148
  • 957
  • 1,375
Jon Garnett-Smith
  • 43
  • 4
  • 3
    No, there is no way. Usually custom dialogs are created using html and css – Konrad Dec 31 '22 at 00:26
  • 1
    Thank you for your feedback. This will save me a huge amount of time trawling the web to find out how :D – Jon Garnett-Smith Dec 31 '22 at 00:35
  • Instead of the built in prompt you can create your own modal dialog box, either using plain JavaScript or using the jquery-ui library. That way you can present your own form, containing fields such as dropdowns, checkboxes, etc. – Peter Thoeny Dec 31 '22 at 00:52
  • 1
    Does this answer your question? [How to customize the JavaScript prompt?](https://stackoverflow.com/questions/9193333/how-to-customize-the-javascript-prompt) – Heretic Monkey Dec 31 '22 at 01:12

1 Answers1

0

Here is a plain JavaScript modal dialog with a 'rock', 'paper', 'scissors' dropdown:

const showButton = document.getElementById('showDialog');
const pickDialog = document.getElementById('pickDialog');
const outputBox = document.querySelector('output');
const selectEl = pickDialog.querySelector('select');
const confirmBtn = pickDialog.querySelector('#confirmBtn');
const selectOptions = ['rock', 'paper', 'scissors'];

selectEl.innerHTML = ['Select...'].concat(selectOptions).map(val => `<option>${val}</option>`).join('');
// "Update details" button opens the <dialog> modally
showButton.addEventListener('click', () => {
    pickDialog.showModal();
});
// "Favorite object" input sets the value of the submit button
selectEl.addEventListener('change', (e) => {
  confirmBtn.value = selectEl.value;
});
// "Confirm" button of form triggers "close" on dialog because of [method="dialog"]
pickDialog.addEventListener('close', () => {
  outputBox.value = `Selected option: ${pickDialog.returnValue}`;
});
<dialog id="pickDialog">
  <form method="dialog">
    <p>
      <label>Favorite object:
        <select></select>
      </label>
    </p>
    <div>
      <button value="cancel">Cancel</button>
      <button id="confirmBtn" value="default">Confirm</button>
    </div>
  </form>
</dialog>
<p>
  <button id="showDialog">Show the dialog</button>
</p>
<output></output>
<div><br  />Input field to test modal mode:<br  /> <input />

Docs: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog

Note: If you want to wait/halt the code until the custom dialog is dismissed (same as with prompt() and alert()), you can define a Promise() on pickDialog.showModal() with resolve on pickDialog.addEventListener('close', ...). Example: https://stackoverflow.com/a/71433532/7475450

Peter Thoeny
  • 7,379
  • 1
  • 10
  • 20