Get value of selected option in javascript

user_10693736 0
Viewed 17384

    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.

html javascript
3 Answers

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>

user_5148780

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>

user_136690480

The option value is stored inside the value attribute.

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