Question

我正在尝试使用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（）用于问题变量时，我希望查看用户实际选择的值，而不是未定义的值。

Answer 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>

Answer 2

您的代码中有一些错误。

函数getElementsByName()返回一个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);
}

javascript函数的格式不正确？

2 个答案: