Question

我正在建立一个人格评估页面。但是，我严重陷入困境，在这一点上，我甚至无法理解我哪里出错了。（心理学学生在这里，所以这个世界对我来说是新的。）

<form action="answer.html" method="get" class="personality_form" id="personality_form" onsubmit="return validateForm()">
<tr>
  <td>Statement1</td>
  <td><input type="radio" name="st1" class="dis" value="-1"></td>
  <td><input type="radio" name="st1" class="na" value="0"></td>
  <td><input type="radio" name="st1" class="agg" value="1"></td>
</tr>
<tr>
  <td>Statement2</td>
  <td><input type="radio" name="st2" class="dis" value="-1"></td>
  <td><input type="radio" name="st2" class="na" value="0"></td>
  <td><input type="radio" name="st2" class="agg" value="1"></td>
</tr>
<tr>
  <td>Statement3</td>
  <td><input type="radio" name="st3" class="dis" value="-1"></td>
  <td><input type="radio" name="st3" class="na" value="0"></td>
  <td><input type="radio" name="st3" class="agg" value="1"></td>
</tr>
<tr>
  <td>Statement4</td>
  <td><input type="radio" name="st4" class="dis" value="-1"></td>
  <td><input type="radio" name="st4" class="na" value="0"></td>
  <td><input type="radio" name="st4" class="agg" value="1"></td>
</tr>
<tr>
  <td>Statement5</td>
  <td><input type="radio" name="st5" class="dis" value="-1"></td>
  <td><input type="radio" name="st5" class="na" value="0"></td>
  <td><input type="radio" name="st5" class="agg" value="1"></td>
</tr>
<tr>
    <th colspan="4"><button type="submit" onclick="get();">Get Results</button></th>
</tr>
  </form>

现在我在这里添加以下脚本：

function get() {
    var res1 = document.getElementsByName("st1").value;
    var res2 = document.getElementsByName("st2").value;
    var x = res1 + res2;
    if (x < 0) {
    document.getElementById('result').innerHTML = x;
    }
}

answer.html由

组成

<div id="result"></div>

无论我怎么努力，我似乎无法获得价值。我尝试过id="st1_1"和getElementById，但它仍然不会这样做。

任何建议或想法我做错了什么？

谢谢

Answer 1

document.getElementsByName会返回NodeList，因此有多个元素。因此，它没有value属性，因此res1和res2为undefined。

尝试将document.getElementsByName("st1").value更改为document.querySelector("[name=\"st1\"]:checked").value。如果您收到类似“TypeError：无法读取属性'值'的错误消息”，则表示没有选中名为“st1”的输入。

Answer 2

加入James Long的回答，在网页上打开控制台并键入

document.getElementsByName("st1");

你会得到的 [<input type="radio" name="st1" class="dis" value="-1">, <input type="radio" name="st1" class="na" value="0">, <input type="radio" name="st1" class="agg" value="1">]

这表示您上面的代码返回一个数组。现在，要选择<input>个标记之一，您可以使用document.getElementsByName("st1")[0]选择第一个<input>。

要找出已选择的输入，请迭代输入并找到总和。如果您将值更改为

  <input type="radio" name="st#" class="dis" value="1">
  <input type="radio" name="st#" class="na" value="2">
  <input type="radio" name="st#" class="agg" value="4">

然后如果总和为1，则选择第一个，如果是2，则选择第二个，如果选择3然后选择前两个，如果选择4然后选择第三个，如果是5则第一个和第三个，然后选择第二和第三，7然后全部三。

Answer 3

function get() {
   
    var res1 = document.querySelector('input[name="st1"]:checked').value;

    var res2 = document.querySelector('input[name="st2"]:checked').value;

     console.log("res1="+res1);
     console.log("res2="+res2);
     
   var x = parseInt(res1) + parseInt(res2);
   // if (x < 0) {
    document.getElementById('result').innerHTML = x;
   // }
}

<form method="get" class="personality_form" id="personality_form">
<table>
<tr>
  <td>Statement1</td>
  <td><input type="radio" name="st1" class="dis" value="-1"></td>
  <td><input type="radio" name="st1" class="na" value="0"></td>
  <td><input type="radio" name="st1" class="agg" value="1"></td>
</tr>
<tr>
  <td>Statement2</td>
  <td><input type="radio" name="st2" class="dis" value="-1"></td>
  <td><input type="radio" name="st2" class="na" value="0"></td>
  <td><input type="radio" name="st2" class="agg" value="1"></td>
</tr>
<tr>
  <td>Statement3</td>
  <td><input type="radio" name="st3" class="dis" value="-1"></td>
  <td><input type="radio" name="st3" class="na" value="0"></td>
  <td><input type="radio" name="st3" class="agg" value="1"></td>
</tr>
<tr>
  <td>Statement4</td>
  <td><input type="radio" name="st4" class="dis" value="-1"></td>
  <td><input type="radio" name="st4" class="na" value="0"></td>
  <td><input type="radio" name="st4" class="agg" value="1"></td>
</tr>
<tr>
  <td>Statement5</td>
  <td><input type="radio" name="st5" class="dis" value="-1"></td>
  <td><input type="radio" name="st5" class="na" value="0"></td>
  <td><input type="radio" name="st5" class="agg" value="1"></td>
</tr>
<tr>
    <th colspan="4"><button type="button" onclick="get();">Get Results</button></th>
</tr>
</table>
  </form>
  
  <div id="result"></div>

Answer 4

请查看工作代码，这可能有助于解决问题。你不应该同时使用“onClick（）on submit button”和“OnSubmit on form post”。

点击（）

此方法是前两个变体和第三个变体的快捷方式。当鼠标指针悬停在元素上时，单击事件将发送到元素，并按下并释放鼠标按钮。任何HTML元素都可以接收此事件。用鼠标单击（）事件绑定。有多个可用于鼠标的事件。

提交（）

submit（）此方法是第一个变体中.on（“submit”，handler）和第三个变量中的.trigger（“submit”）的快捷方式。此方法属于表单事件。还有更多事件仅与HTML表单绑定。

当用户尝试提交表单时，会将提交事件发送给元素。它只能附加到元素上。可以通过单击显式，或，或者在某些表单元素具有焦点时按Enter键来提交表单。

$(document).ready(function() {
  $(".personality_form").on("submit", function(e) {
    e.preventDefault();
    getData();
  });

  function getData() {
    var res1 = $("input[name='st1']").val();
    var res2 = $("input[name='st2']").val();
    var x = parseInt(res1) + parseInt(res2);
    if (x < 0) {
      $('.result').html(x);
    }
  }

  function validateForm() {
    return true;
  }

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" method="POST" class="personality_form" id="personality_form">
  <tr>
    <td>Statement1</td>
    <td>
      <input type="radio" name="st1" class="dis" value="-1">
    </td>
    <td>
      <input type="radio" name="st1" class="na" value="0">
    </td>
    <td>
      <input type="radio" name="st1" class="agg" value="1">
    </td>
  </tr>
  <tr>
    <td>Statement2</td>
    <td>
      <input type="radio" name="st2" class="dis" value="-1">
    </td>
    <td>
      <input type="radio" name="st2" class="na" value="0">
    </td>
    <td>
      <input type="radio" name="st2" class="agg" value="1">
    </td>
  </tr>
  <tr>
    <td>Statement3</td>
    <td>
      <input type="radio" name="st3" class="dis" value="-1">
    </td>
    <td>
      <input type="radio" name="st3" class="na" value="0">
    </td>
    <td>
      <input type="radio" name="st3" class="agg" value="1">
    </td>
  </tr>
  <tr>
    <td>Statement4</td>
    <td>
      <input type="radio" name="st4" class="dis" value="-1">
    </td>
    <td>
      <input type="radio" name="st4" class="na" value="0">
    </td>
    <td>
      <input type="radio" name="st4" class="agg" value="1">
    </td>
  </tr>
  <tr>
    <td>Statement5</td>
    <td>
      <input type="radio" name="st5" class="dis" value="-1">
    </td>
    <td>
      <input type="radio" name="st5" class="na" value="0">
    </td>
    <td>
      <input type="radio" name="st5" class="agg" value="1">
    </td>
  </tr>
  <tr>
    <th colspan="4">
      <button type="submit" class="btnSubmit">Get Results</button>
    </th>
  </tr>
</form>

<div class="result">
</div>

Answer 5

getElementsByName会返回live nodelist，因此您无法立即获取该值。您需要迭代节点列表（或使用数组表示法获取所需的节点），然后添加值。

但是，您可能会发现更容易的是使用querySelectorAll选中所有已选中的按钮（document.querySelectorAll(":checked")）并重复这些按钮，确保您转换将值添加到一起时，每次迭代时数字的字符串值。

＆＃13;

function get() {
  var checked = document.querySelectorAll(":checked");
  let total = 0;
  for (let i = 0; i < checked.length; i++) {
    total += Number(checked[i].value);
  }
  document.getElementById('result').textContent = total;
}

document.querySelector('button').addEventListener('click', get, false);

＆＃13;

<table>
  <tr>
    <td>Statement1</td>
    <td><input type="radio" name="st1" class="dis" value="-1"></td>
    <td><input type="radio" name="st1" class="na" value="0"></td>
    <td><input type="radio" name="st1" class="agg" value="1"></td>
  </tr>
  <tr>
    <td>Statement2</td>
    <td><input type="radio" name="st2" class="dis" value="-1"></td>
    <td><input type="radio" name="st2" class="na" value="0"></td>
    <td><input type="radio" name="st2" class="agg" value="1"></td>
  </tr>
</table>

<button>Get!</button>
<div id="result"></div>

＆＃13;

无法使用Javascript获取单选按钮值

5 个答案: