5 

 function Play() { var option = ["Rock", "Paper", "Scissors"]; var randomOption = option[Math.floor(Math.random()*option.length)]; console.log(randomOption) var UserOption = document.getElementById('UserSelect'); console.log(UserOption); } Play();
 <div class="form-group"> <select class="form-control" id="UserSelect"> <option value="1">Rock</option> <option value="2">Paper</option> <option value="3">Scissors</option> </select> </div>

I'm trying to save the selected option in UserOption. I can't seem to figure out what I am doing wrong.

Improve this question
5
  • How are you calling Play() function ? I can not see this function being called anywhere in your code Commented Sep 9, 2020 at 1:49
  • @AlwaysHelping I am calling it after the js piece of code I showed. I just added it. Commented Sep 9, 2020 at 1:50
  • Change your value attributes to be the actual string you want instead of a number, eg <option value="Rock">Rock</option> then you can simply use document.getElementById("UserSelect").value Commented Sep 9, 2020 at 1:52
  • @Phil I just tried it, I get this error in console: Uncaught TypeError: Cannot read property 'value' of null Commented Sep 9, 2020 at 1:54
  • Then either your IDs are wrong or your script runs before the elements exist in the document. Commented Sep 9, 2020 at 1:56

4 Answers 4

Reset to default
14

You just need to get the value of the select, like this:

var UserOption = document.getElementById('UserSelect').value;

Then you can get the name from the options array like this:

console.log(options[UserOption-1])

Working Snippet

function Play() { var option = ["Rock", "Paper", "Scissors"]; var randomOption = option[Math.floor(Math.random()*option.length)]; var UserOption = document.getElementById('UserSelect').value; console.log("Player:" +option[UserOption-1] + " vs Computer:" + randomOption ); }
<body> <div class="form-group"> <select class="form-control" id="UserSelect"> <option value="1">Rock</option> <option value="2">Paper</option> <option value="3">Scissors</option> </select> </div> <button class="play" onclick="Play();">Play</button> </body>

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

your code is correct but does not display the winners
@XMehdi01 The question was “how to get the selected option”, it didn’t ask for the winners.
We, as programmers, should add this on our own. Look at the code you provided
@XMehdi01 No we shouldn't add anything on our own! That's goes against the purpose of Stack Overflow. This isn't a resource to get complete functioning code, it is a Q&A repository where each question is about one specific task for the purpose of future users who may need to do that task. Adding unnecessary code for extra functionality that wasn't requested is unhelpful - as well as not being how SO works, it complicates the answer for future users by making it more difficult for them to identify the specific code necessary to achieve that specific task.
3

You can call you play() function using onchange function on your select and passing this as the argument

In your Play() function just get the option selected Index and get it textContent to see what was selected

Also, please ensure that your script tags are added after the </body> end and not in head of the page

function Play(e) { var option = ["Rock", "Paper", "Scissors"]; var randomOption = option[Math.floor(Math.random() * option.length)]; console.log(randomOption) var UserOption = e.options[e.selectedIndex].textContent; console.log(UserOption); }
<body> <div class="form-group"> <select class="form-control" id="UserSelect" onchange="Play(this)"> <option selected disabled>Choose</option> <option value="1">Rock</option> <option value="2">Paper</option> <option value="3">Scissors</option> </select> </div> </body>

Improve this answer

Comments

2

The option value is stored inside the value attribute.

 var UserOption = document.getElementById('UserSelect').value; console.log(UserOption);
Improve this answer

Comments

0

get value of user :

UserSelect.options[UserSelect.selectedIndex].textContent

get random value :

var option = ["Rock", "Paper", "Scissors"]; var randomOption = option[Math.floor(Math.random()*option.length)];

Full Code

let UserSelect = document.querySelector("#UserSelect") UserSelect.addEventListener("change",()=>{ var option = ["Rock", "Paper", "Scissors"]; var randomOption = option[Math.floor(Math.random()*option.length)]; var UserOption = UserSelect.options[UserSelect.selectedIndex].textContent; console.log("User selected: " + UserOption); console.log("Computer selected: " + randomOption); if(UserOption === randomOption){ console.log("It's a draw 🤝🤝"); } else if((UserOption === "Rock" && randomOption === "Scissors") || (UserOption === "Paper" && randomOption === "Rock") || (UserOption === "Scissors" && randomOption === "Paper")){ console.log("User wins 👏🎉"); } else { console.log("Computer wins 😔😔!"); } })
 <div class="form-group"> <select class="form-control" id="UserSelect"> <option value="1">Rock</option> <option value="2">Paper</option> <option value="3">Scissors</option> </select> </div>

This code sets up an event listener for the change event on the UserSelect element. When the user selects an option from the dropdown, the event is triggered, and the code inside the event listener is executed.

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.