HTML问卷多步JavaScript计算失效及相关技术问题咨询

一、多步乘除计算失效的核心原因 #

你的代码中HTML单选按钮未设置id属性，但JS里用document.getElementById("f1")尝试获取值，导致无法拿到有效输入，所有数值变量会变成NaN，后续乘除计算自然失效。

修正方案：通过document.querySelector('input[name="xxx"]:checked')获取选中的单选按钮值，无需额外设置id。

二、疑问解答 #

1. 如何添加4个IF条件 #

你当前代码已有4个结果分支，若需调整为更明确的4个区间判断，只需细化else if的条件阈值即可。示例：

let result;
if (totalValue < 2.5) {
  result = "very low";
} else if (totalValue < 5) {
  result = "low";
} else if (totalValue < 7.5) {
  result = "medium";
} else {
  result = "high";
}

注意：必须用let声明result变量，避免全局变量污染。

2. 在新页面打印计算结果 #

需要分两步实现：

第一步：提交页面传递结果参数

替换原跳转代码，将计算结果通过URL参数传递给新页面：

const url = `result.html?totalValue=${encodeURIComponent(totalValue.toFixed(2))}&result=${encodeURIComponent(result)}`;
window.location.href = url;

第二步：结果页面读取并显示数据

创建result.html，读取URL参数并渲染结果：

<!DOCTYPE html>
<html>
<body>
  <h2>问卷计算结果</h2>
  <p>综合得分：<span id="total"></span></p>
  <p>评级：<span id="result"></span></p>
  <script>
    const params = new URLSearchParams(window.location.search);
    document.getElementById('total').textContent = params.get('totalValue');
    document.getElementById('result').textContent = params.get('result');
  </script>
</body>
</html>

3. 小数处理：使用parseFloat的正确方式 #

是的，处理小数时用parseFloat()是正确的，同时需注意两点：

• 所有数值型输入都用parseFloat()转换，确保类型正确
• 处理未选择单选按钮的情况，避免出现NaN，给默认值兜底：

const f1Checked = document.querySelector('input[name="f1"]:checked');
let f1V = f1Checked ? parseFloat(f1Checked.value) : 0;

// 同理处理f2V、a1V、a2V

三、完整修正后的JS代码 #

document.getElementById("survey-form").addEventListener("submit", function(event) {
    event.preventDefault();
    
    // 获取选中的单选按钮值，处理未选择的情况
    const f1Checked = document.querySelector('input[name="f1"]:checked');
    let f1V = f1Checked ? parseFloat(f1Checked.value) : 0;
    
    const f2Checked = document.querySelector('input[name="f2"]:checked');
    let f2V = f2Checked ? parseFloat(f2Checked.value) : 0;
    
    const a1Checked = document.querySelector('input[name="a1"]:checked');
    let a1V = a1Checked ? parseFloat(a1Checked.value) : 0;
    
    const a2Checked = document.querySelector('input[name="a2"]:checked');
    let a2V = a2Checked ? parseFloat(a2Checked.value) : 0;
    
    // 避免除数为0的异常
    let totalBobot = f1V + f2V;
    if (totalBobot === 0) {
        alert("请至少选择一项评分");
        return;
    }
    
    let Bobot1 = f1V / totalBobot;
    let Bobot2 = f2V / totalBobot;
    
    let n1 = a1V * Bobot1;
    let n2 = a2V * Bobot2;
    
    let totalValue = n1 + n2;
    
    // 4个条件分支示例
    let result;
    if (totalValue < 2.5) {
        result = "very low";
    } else if (totalValue < 5) {
        result = "low";
    } else if (totalValue < 7.5) {
        result = "medium";
    } else {
        result = "high";
    }
    
    // 跳转到结果页面并传递参数
    const url = `result.html?totalValue=${encodeURIComponent(totalValue.toFixed(2))}&result=${encodeURIComponent(result)}`;
    window.location.href = url;
});

内容的提问来源于stack exchange，提问作者Mochi The PooH