JavaScript双输入框计算无结果：问题原因及修复方法

核心错误原因 #

你的代码里有一个致命语法错误，导致整个初始化逻辑完全没触发：
window.addEventListener = ("load", init); 这行写法错误，正确的事件绑定是调用addEventListener方法，而非给它赋值。这就导致页面加载完成后，init函数根本没执行，按钮的点击事件也没绑定上，所以点击Calculate按钮自然毫无反应。

另外还有个潜在问题：没处理用户输入非数字的情况，如果输入的不是有效数值，parseFloat会返回NaN，计算后结果也是NaN，最终输入框里会显示空或者无效值。

修复步骤 #

1. 修正事件绑定语法
   把错误的赋值代码改成正确的方法调用：

window.addEventListener("load", init);

2. 添加输入合法性校验
   在clickCalc函数里，先判断两个输入值是否为有效数字，如果不是，给用户提示并终止计算：

修正后的完整代码 #

JavaScript #

function calcStepDays(st, dw) {
    return st * dw;
}

function clickCalc() {
    var st = parseFloat(document.getElementById("stepsTaken").value);
    var dw = parseFloat(document.getElementById("daysWalked").value);
    
    // 校验输入是否为有效数字
    if (isNaN(st) || isNaN(dw)) {
        alert("请输入有效的数字！");
        return;
    }
    
    var tsw = calcStepDays(st, dw);
    var result = document.getElementById("totalWalks");
    var roundRus = Math.round(tsw * 100) / 100;
    result.value = roundRus;
}

function init() {
    var button = document.getElementById("button1");
    button.addEventListener("click", clickCalc);
}

window.addEventListener("load", init);

HTML #

<p>输入你每天走的平均步数和走路的天数，查看总步数</p>

<label for="stepsTaken">每天平均步数</label><br><br>
<input type="text" id="stepsTaken"><br><br>
<label for="daysWalked">走路天数</label><br><br>
<input type="text" id="daysWalked"><br><br>

<button id="button1">Calculate</button><br><br>
<label for="totalWalks">总步数</label>
<input type="text" id="totalWalks"><br><br>

内容的提问来源于stack exchange，提问作者Esther Lee