JavaScript页面异常：If语句失效、公式计算不生效求助

你的代码存在几个关键问题，导致逻辑不生效，以下是具体问题和修复方案：

核心错误点 #

1. 变量声明顺序颠倒
   你在计算Result时，用到的BVALUE、GVALUE、LVALUE等变量还未被声明和赋值，此时这些变量都是undefined，计算结果必然是NaN。必须把Result的计算代码移到所有变量赋值之后。

2. 条件判断误用赋值运算符
   if (LVALUE="default")是赋值操作（将字符串"default"赋值给LVALUE），这个表达式永远返回true，导致默认选项的逻辑被完全忽略。应该用严格相等运算符===进行比较：if (LVALUE === "default")。

3. 输入值未转换为数字类型
   从输入框获取的value是字符串类型，直接参与数学运算会导致字符串拼接（比如"2"+"3"得到"23"而非5），需要用parseFloat()将输入值转换为浮点数字，确保运算正确。

4. 初始执行的空值处理
   页面加载时自动执行onChange()，此时输入框为空，转换后会得到NaN，可以给输入值添加默认值（比如0），避免计算出错。

修复后的完整代码 #

<!DOCTYPE html>
<html>
    <body>
        <label for="gval">G Value:</label>
        <input type="text" id="gval" name="gval">
        <label for="sval">S Value:</label>
        <input type="text" id="sval" name="sval">
        <label for="bval">B Value:</label>
        <input type="text" id="bval" name="bval">
        <label for="dval">D Value:</label>
        <input type="text" id="dval" name="dval">
        <select id="Level">
            <option value="default" selected>1-18</option>
            <option value="1">Level 1</option>
            <option value="2">Level 2</option>
            <option value="3">Level 3</option>
            <option value="4">Level 4</option>
            <option value="5">Level 5</option>
            <option value="6">Level 6</option>
            <option value="7">Level 7</option>
            <option value="8">Level 8</option>
            <option value="9">Level 9</option>
            <option value="10">Level 10</option>
            <option value="11">Level 11</option>
            <option value="12">Level 12</option>
            <option value="13">Level 13</option>
            <option value="14">Level 14</option>
            <option value="15">Level 15</option>
            <option value="16">Level 16</option>
            <option value="17">Level 17</option>
            <option value="18">Level 18</option>
        </select>
        <span id="HPVAL">640-247</span>
        <script>
        var e = document.getElementById("Level");
        function onChange() {
            // 先获取所有变量并转换为数字
            var LVALUE = e.value;
            var HPVALVAR = document.getElementById('HPVAL');
            // 转换为数字，空值时默认0
            var SVALUE = parseFloat(document.getElementById('sval').value) || 0;
            var GVALUE = parseFloat(document.getElementById('gval').value) || 0;
            var BVALUE = parseFloat(document.getElementById('bval').value) || 0;
            var DVALUE = document.getElementById('dval').value;
            const span = HPVALVAR;
            
            if (LVALUE === "default") {
                span.innerHTML = DVALUE;
            } else {
                // 转换等级为数字
                var levelNum = parseFloat(LVALUE);
                // 计算Result，确保所有变量都是数字类型
                var Result = BVALUE + GVALUE * ((levelNum - 1) * ((0.66 + (SVALUE/100 - 0.05)) + ((1 - (0.66 + (SVALUE/100 - 0.05)))/17) * (levelNum - 1)));
                // 控制小数位数，显示更友好
                span.innerHTML = Result.toFixed(2);
            }
        }
        e.onchange = onChange;
        onChange();
        </script>
    </body>
</html>

额外优化说明 #

• 把LVALUE转换为数字levelNum再参与计算，避免字符串运算风险。
• 添加toFixed(2)控制结果的小数位数，显示更友好。
• 统一span的ID为小写id="HPVAL"，符合HTML规范（虽然JS里大小写不敏感，但规范写法更易维护）。

内容的提问来源于stack exchange，提问作者Mike MW