функция javascript не принимает значение формы?

ProgramBox

функция javascript не принимает значение формы?

Post author:admin
Запись опубликована:14 февраля, 2023
Post category:Вопросы по программированию

#javascript #html #forms

#javascript #HTML #формы

Вопрос:

Я пытаюсь создать действительно простой тест с переключателями с помощью javascript и HTML-формы. Когда я пытаюсь взять значения вопроса формы и поместить их в переменные, они не принимаются. Когда я console.log q1, я просто получаю undefined.

Я пытался присвоить переключателям идентификаторы с помощью getElementById, не работает. Я также пробовал document.forms[‘infoForm’][‘question1’].value;

 function results() {
  event.preventDefault();

  var q1 = document.getElementsByName('question1').value;
  var q2 = document.getElementsByName('question2').value;
  var q3 = document.getElementsByName('question3').value;
  var q4 = document.getElementsByName('question4').value;

  console.log(q1);
}

 <form name="infoForm" id="infoForm" onsubmit="return results();" method="post">

  <fieldset>
    <legend>Here's a Quiz!</legend>
    <div class="question">
      quiz question 1<br>
      <input type="radio" name="question1" value="W">W<br>
      <input type="radio" name="question1" value="R1">R<br>
      <input type="radio" name="question1" value="W">W<br>
    </div>
    <div class="question">
      quiz question 2<br>
      <input type="radio" name="question2" value="R2">R<br>
      <input type="radio" name="question2" value="W">W<br>
      <input type="radio" name="question2" value="W">W<br>
    </div>
    <div class="question">
      quiz question 3<br>
      <input type="radio" name="question3" value="W">W<br>
      <input type="radio" name="question3" value="R3">R<br>
      <input type="radio" name="question3" value="W">W<br>
    </div>
    <div class="question">
      quiz question 4<br>
      <input type="radio" name="question4" value="W">W<br>
      <input type="radio" name="question4" value="W">W<br>
      <input type="radio" name="question4" value="R4">R<br>
    </div>
    <input type="submit" value="Submit">

  </fieldset>
</form>

При использовании console.log() для переменных вопроса я хотел бы видеть значение, которое фактически выбрал пользователь, вместо undefined .

1. q1 не имеет value свойства. Как и любая другая коллекция.

2. getElements возвращает, ну, элементы , а не один элемент … getElementById было бы лучшим выбором и должно работать так, как ожидалось, не могли бы вы показать нам эту попытку?

3. @olian04 хотя это немного связано с вопросом и, вероятно, является следующей проблемой, с которой сталкивается OP, это не отвечает на вопрос, который он задал

Ответ №1:

.getElementsByName() возвращает массив элементов. Однако, используя его и захватывая первый элемент, вы получите только первый элемент в наборе переключателей, а не выбранный переключатель.

Поскольку у вас есть name атрибуты, вы можете просто использовать путь для получения элемента следующим образом:

 document.infoForm.question1.value

Затем вы можете сделать это для всех 4 вопросов, чтобы это выглядело примерно так:

 function results() {
  event.preventDefault();

  var q1 = document.infoForm.question1.value;
  var q2 = document.infoForm.question2.value;
  var q3 = document.infoForm.question3.value;
  var q4 = document.infoForm.question4.value;

  console.log(q1, q2, q3, q4);
}

 <form name="infoForm" id="infoForm" onsubmit="return results();" method="post">

  <fieldset>
    <legend>Here's a Quiz!</legend>
    <div class="question">
      quiz question 1<br>
      <input type="radio" name="question1" value="W">W<br>
      <input type="radio" name="question1" value="R1">R<br>
      <input type="radio" name="question1" value="W">W<br>
    </div>
    <div class="question">
      quiz question 2<br>
      <input type="radio" name="question2" value="R2">R<br>
      <input type="radio" name="question2" value="W">W<br>
      <input type="radio" name="question2" value="W">W<br>
    </div>
    <div class="question">
      quiz question 3<br>
      <input type="radio" name="question3" value="W">W<br>
      <input type="radio" name="question3" value="R3">R<br>
      <input type="radio" name="question3" value="W">W<br>
    </div>
    <div class="question">
      quiz question 4<br>
      <input type="radio" name="question4" value="W">W<br>
      <input type="radio" name="question4" value="W">W<br>
      <input type="radio" name="question4" value="R4">R<br>
    </div>
    <input type="submit" value="Submit">

  </fieldset>
</form>

Ответ №2:

В вашем коде есть некоторые ошибки.

Функция getElementsByName() возвращает a NodeList , поэтому вы не можете получить доступ к ее свойству value . Попробуйте получить его первый индекс: getElementsByName()[0].value

Переменная event не определена. Я предполагаю, что вы используете функцию results в качестве прослушивателя событий. Если это так, событие отправляется как параметр, и вам нужно его определить:

 function results(event) {
  event.preventDefault();

  var q1 = document.getElementsByName('question1')[0].value;
  var q2 = document.getElementsByName('question2')[0].value;
  var q3 = document.getElementsByName('question3')[0].value;
  var q4 = document.getElementsByName('question4')[0].value;

  console.log(q1);
}