Блог

Главная - Вопросы по программированию - Получить значение выбранной опции в javascript

Получить значение выбранной опции в javascript

#javascript #html

#javascript #HTML

Вопрос:

     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>

Я пытаюсь сохранить выбранную опцию в UserOption. Кажется, я не могу понять, что я делаю не так.

Комментарии:

1. Как вы вызываете Play() функцию? Я не вижу, чтобы эта функция вызывалась где-либо в вашем коде

2. @AlwaysHelping Я вызываю его после фрагмента кода js, который я показал. Я только что добавил его.

3. Измените свои value атрибуты, чтобы они были фактической строкой, которую вы хотите, вместо числа, например, <option value="Rock">Rock</option> , тогда вы можете просто использовать document.getElementById("UserSelect").value

4. @Phil Я только что попробовал это, я получаю эту ошибку в консоли: Uncaught TypeError: не удается прочитать значение свойства null

5. Тогда либо ваши идентификаторы неверны, либо ваш скрипт запускается до того, как элементы существуют в документе.

Ответ №1:

Вам просто нужно получить значение выбора, вот так:

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

Затем вы можете получить имя из массива опций следующим образом:

 console.log(options[UserOption-1])

Рабочий фрагмент

 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>

Ответ №2:

Вы можете вызвать свою play() функцию, используя onchange функцию при выборе и передавая this как argument

В вашей Play() функции просто получите опцию selected Index и получите ее textContent , чтобы увидеть, что было выбрано

Кроме того, пожалуйста, убедитесь, что ваши script теги добавлены после </body> конца, а не в head части страницы

 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>

Ответ №3:

Значение параметра хранится внутри атрибута value.

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