Get value of selected option in javascript

Question

    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.

How are you calling Play() function ? I can not see this function being called anywhere in your code — Always Helping
– Always Helping, Commented Sep 9, 2020 at 1:49
@AlwaysHelping I am calling it after the js piece of code I showed. I just added it. — Nathan
– Nathan, 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 — Phil
– Phil, 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 — Nathan
– Nathan, Commented Sep 9, 2020 at 1:54
Then either your IDs are wrong or your script runs before the elements exist in the document. — Phil
– Phil, Commented Sep 9, 2020 at 1:56

FluffyKitten · Accepted Answer · 2020-09-09 02:00:30Z

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>

edited Sep 9, 2020 at 2:00

answered Sep 9, 2020 at 1:52

FluffyKitten

14.4k10 gold badges44 silver badges54 bronze badges

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

4 Comments

TAHER El Mehdi Over a year ago

your code is correct but does not display the winners

FluffyKitten Over a year ago

@XMehdi01 The question was “how to get the selected option”, it didn’t ask for the winners.

TAHER El Mehdi Over a year ago

We, as programmers, should add this on our own. Look at the code you provided

FluffyKitten Over a year ago

@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.

Always Helping · Accepted Answer · 2020-09-09 01:59:43Z

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>

wadecodes · Accepted Answer · 2020-09-09 01:53:32Z

2

The option value is stored inside the value attribute.

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

answered Sep 9, 2020 at 1:53

wadecodes

1877 bronze badges

Comments

TAHER El Mehdi · Accepted Answer · 2023-07-08 14:41:28Z

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.

Collectives™ on Stack Overflow

Get value of selected option in javascript

4 Answers 4

4 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related