Блог

Я работаю над созданием небольшой текстовой приключенческой игры в течение следующей недели, используя только HTML, CSS и JavaScript, однако я столкнулся с проблемами с самого начала, поскольку я пытаюсь предоставить игроку выбор с помощью переключателей, поэтому они выбирают выбор, затем нажимают отправить, и на основе выбора может произойти несколько вещей. Однако я понятия не имею, как на самом деле достичь этой функции…

Я искал учебные пособия или примеры, содержащие похожие вопросы, как у меня, однако ни один из них не помог слишком сильно.

   <form>
    <input type="radio" name="choice" value="A1" checked> Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br>
    <input type="radio" name="choice" value="A2"> Proin volutpat eros fringilla felis euismod laoreet a eu velit. <br>
    <input type="radio" name="choice" value="A3"> Mauris orci mi, luctus in leo eget, facilisis imperdiet lacus. <br><br>
    <button type="button" onclick=choiceA()> Choose </button>
  </form>
  

Я бы хотел, чтобы использованные пользователи могли проверить один из этих параметров, затем нажать кнопку «Выбрать» и продолжить свой путь, зарегистрировав свой выбор в JavaScript для справки позже.

Как я могу заставить свой Javascript распознавать, какой параметр переключателя выбран в моем HTML?

Вы можете использовать FormData . Для этого сначала введите идентификатор в форму.В этом примере это делается с name атрибутом. Вы также можете использовать id

Во-вторых, используйте get метод для получения значения выбранной формы

 function choiceA(e) {
  e.preventDefault();
  var form = document.forms.namedItem("fileinfo");
  var formData = new FormData(form);
  console.log(formData.get('choice'))
  }  

 <form name='fileinfo'>
  <input type="radio" name="choice" value="A1" checked> Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br>
  <input type="radio" name="choice" value="A2"> Proin volutpat eros fringilla felis euismod laoreet a eu velit. <br>
  <input type="radio" name="choice" value="A3"> Mauris orci mi, luctus in leo eget, facilisis imperdiet lacus. <br><br>
  <button type="submit" onclick=choiceA(event)> Choose </button>
</form>  

вы можете добавить их внутри div

 <div id="collection">
<label>Value1
    <input name="myradio" type="radio" value="value1" />
</label>
<label>Value2
    <input name="myradio" type="radio" value="value2" />
</label>
  

и jquery

     $(function () {
    $('#collection input[type=radio]').change(function(){
      alert ( $(this).val() ) 
      //do your activity
      })
})
  

Вы можете использовать эту простую функцию и полностью выполнить свою задачу. Я беру значение из переключателя всякий раз, когда пользователь нажимает на любой btn, затем это значение используется для выполнения операции в соответствии с выбором в choiceA();

 <form>
    <input type="radio" name="choice" onclick="getRadioValue('A1')" value="A1" checked> Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br>
    <input type="radio" name="choice" onclick="getRadioValue('A2')" value="A2"> Proin volutpat eros fringilla felis euismod laoreet a eu velit. <br>
    <input type="radio" name="choice" onclick="getRadioValue('A3')" value="A3"> Mauris orci mi, luctus in leo eget, facilisis imperdiet lacus. <br><br>
<button type="button" onclick=choiceA()> Choose </button>
  

В js. создайте функцию с тем же именем, ie. getRadioValue(параметр)

 var globalSelectedValue = 'A1';
function getRadioValue(param){
    globalSelectedValue = param;
    console.log(globalSelectedValue);
}

function choiceA(e){
    doSomething(globalSelectedValue);
 }