JavaScript计算器仅首次计算有效，修改输入值后结果不更新问题排查

嘿，我一眼就看出问题出在哪了！你的计算器只在页面加载的时候读取了一次输入框的值，而且奖金（prime）的判断也只做了一次，之后点击计算按钮时根本没去获取用户新输入的数值，结果当然不会更新啦。

具体原因拆解 #

• 输入值未实时更新：你在代码最开头就把coutJour和nbrJour赋值了，这时候取的是页面刚加载时输入框的默认值（空或者0）。之后用户修改输入框内容，这两个变量不会自动同步更新，点击计算时还是用的旧值。
• 奖金判断仅执行一次：prime的判断逻辑写在全局作用域里，只有页面加载时会根据当时的nbrJour计算一次。之后用户修改天数，点击计算时不会重新判断是否符合奖金发放条件。

修正后的JavaScript代码 #

把获取输入值和奖金判断的逻辑放到calcResult函数内部，这样每次点击计算按钮时，都会重新获取最新输入、重新计算奖金：

var calcBtn = document.querySelector('#calc-btn'), resetBtn = document.querySelector('#reset-btn');

calcBtn.addEventListener('click', calcResult);
function calcResult(){
    // 每次计算时重新读取输入框的最新值
    var coutJour = Number(document.querySelector('#coutJour-input').value);
    var nbrJour = Number(document.querySelector('#nbrJour-input').value);
    var slrBase, slrNet, prime;

    // 每次计算时重新判断奖金是否发放
    if(nbrJour >= 25){
        prime = 200;
    } else{
        prime = 0;
    }

    slrBase = parseFloat(coutJour) * parseInt(nbrJour);
    slrNet = parseFloat(slrBase) + parseInt(prime);
    
    document.getElementById('sb-result').innerHTML = slrBase
    document.getElementById('prime-result').innerHTML = prime;
    document.getElementById('snet-result').innerHTML = slrNet;
}

额外优化建议 #

你可以给输入值增加非空校验，比如当用户未输入数值就点击计算时，显示0或者提示用户输入有效数值，进一步提升交互体验。

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