无法通过JavaScript获取单选按钮值的问题求助

嘿，作为心理学专业同学能自己动手搭建测评页面已经超棒了！咱们一步步拆解你遇到的问题，其实都是前端新手很容易踩的小坑：

核心问题分析 #

1. getElementsByName的使用误区 #

document.getElementsByName("st1")返回的是所有同名单选按钮的集合，不是单个元素，直接.value肯定拿不到选中的值。你需要从这个集合里找到被勾选的那个单选按钮，才能获取它的value。

2. 页面跳转后的DOM操作无效 #

你的表单提交后会跳转到answer.html，但当前页面的get()函数是在跳转前执行的——这时候answer.html还没加载完成，根本没法修改它里面的result元素，自然看不到结果。

3. HTML结构不规范 #

<tr>标签必须放在<table>里面，直接嵌套在<form>里会导致浏览器解析异常，可能间接影响表单功能。

具体解决方案（两种可选） #

方案一：利用URL参数在结果页计算（适合新手，贴合你的原设计） #

这种方式不需要复杂的JS，借助表单method="get"的特性，把选中的值通过URL传递到answer.html，再在结果页读取计算：

第一步：修复原页面的HTML结构和表单

<form action="answer.html" method="get" class="personality_form" id="personality_form">
  <!-- 给tr套上table标签 -->
  <table>
    <tr>
      <td>Statement1</td>
      <td><input type="radio" name="st1" class="dis" value="-1" required></td>
      <td><input type="radio" name="st1" class="na" value="0" required></td>
      <td><input type="radio" name="st1" class="agg" value="1" required></td>
    </tr>
    <tr>
      <td>Statement2</td>
      <td><input type="radio" name="st2" class="dis" value="-1" required></td>
      <td><input type="radio" name="st2" class="na" value="0" required></td>
      <td><input type="radio" name="st2" class="agg" value="1" required></td>
    </tr>
    <!-- 复制上述结构完成Statement3-5 -->
    <tr>
      <th colspan="4"><button type="submit">Get Results</button></th>
    </tr>
  </table>
</form>

• 加了required属性：强迫用户必须选完所有选项才能提交，避免出现未选中的情况
• 移除了多余的onclick和onsubmit，让表单默认的get提交逻辑生效

第二步：在answer.html中读取参数并计算结果

<div id="result"></div>
<script>
// 读取URL里的所有参数
const urlParams = new URLSearchParams(window.location.search);

// 把每个题目的值转成数字（防止字符串拼接）
const st1 = parseInt(urlParams.get('st1')) || 0;
const st2 = parseInt(urlParams.get('st2')) || 0;
const st3 = parseInt(urlParams.get('st3')) || 0;
const st4 = parseInt(urlParams.get('st4')) || 0;
const st5 = parseInt(urlParams.get('st5')) || 0;

// 计算总分
const totalScore = st1 + st2 + st3 + st4 + st5;

// 显示结果，这里可以根据你的测评逻辑添加人格判断
document.getElementById('result').innerHTML = `你的测评总分为：${totalScore}<br>
${totalScore < 0 ? "你的人格偏向XX类型" : totalScore === 0 ? "你的人格偏向XX类型" : "你的人格偏向XX类型"}`;
</script>

方案二：不跳转页面，用JS直接处理（适合想在当前页展示结果的场景） #

如果你不想跳转到新页面，可以阻止表单默认提交，直接在当前页计算并显示结果：

<!-- 原页面添加一个结果展示区域 -->
<div id="result" style="margin-top:20px;"></div>

<form action="answer.html" method="get" class="personality_form" id="personality_form" onsubmit="return handleSubmit()">
  <table>
    <!-- 题目结构和方案一一样 -->
  </table>
</form>

<script>
function handleSubmit() {
  // 阻止表单默认跳转行为
  event.preventDefault();

  // 获取每个题目的选中值
  function getScore(name) {
    const radio = document.querySelector(`input[name="${name}"]:checked`);
    return radio ? parseInt(radio.value) : 0;
  }

  const st1 = getScore('st1');
  const st2 = getScore('st2');
  const st3 = getScore('st3');
  const st4 = getScore('st4');
  const st5 = getScore('st5');

  const totalScore = st1 + st2 + st3 + st4 + st5;
  document.getElementById('result').innerHTML = `你的测评总分为：${totalScore}`;
  
  // 如果需要后续跳转到结果页，可以在这里手动跳转并携带参数
  // window.location.href = `answer.html?st1=${st1}&st2=${st2}...`;
  return false;
}
</script>

内容的提问来源于stack exchange，提问作者Goga Vachnadze