-2

我正在尝试使用 javascript 和 html 表单创建一个非常简单的单选按钮测验。当我尝试采用表单问题值并将它们放入变量时，它们并没有被采用。当我 console.log q1 我只是不确定。

我试过用 getElementById 给单选按钮 id，但不起作用。我也试过 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() 时，我想查看用户实际选择的值，而不是未定义的值。

4

2 回答 2

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>

于 2019-04-16T18:36:00.727 回答
-2

您的代码中有一些错误。

该函数getElementsByName()返回 a NodeList，因此您无法访问其value上的属性。尝试获取它的第一个索引：getElementsByName()[0].value

变量事件未定义。我猜您正在将该函数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);
}
于 2019-04-16T18:34:07.867 回答