如何修复JavaScript代码中的NaN计算错误？

问题根源 #

当输入框为空时，parseFloat("")会返回NaN，只要n1、n2或ex中有一个是NaN，后续的算术运算结果都会变成NaN，最终弹出的结果就是NaN。另外原代码存在逻辑漏洞：当ex>0但MediaFinal不在2.75~5.75区间时，没有任何提示，用户会误以为功能失效。

修复后的代码 #

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <script type="text/javascript">
        function NotaFinal() {
            // 处理空输入，将NaN替换为0
            var n1 = parseFloat(document.getElementById("n1").value) || 0;
            var n2 = parseFloat(document.getElementById("n2").value) || 0;
            var ex = parseFloat(document.getElementById("ex").value) || 0;
            var MediaFinal = n1 + n2;

            if (ex > 0) {
                if(MediaFinal > 2.75 && MediaFinal < 5.75) {
                    MediaFinal = (MediaFinal + (ex*2)) / 3;
                    alert("A nota final é " + MediaFinal.toFixed(1));
                } else {
                    // 补充分支：ex>0但不符合区间时，显示原始MediaFinal
                    alert("A nota final é " + MediaFinal.toFixed(1));
                }
            } else {
                alert("A nota final é " + MediaFinal.toFixed(1));
            }
        }

        function Limpar() {
            document.getElementById("n1").value = "";
            document.getElementById("n2").value = "";
            document.getElementById("ex").value = "";
        }
        
    </script>
</head>
<body>
    <strong><span style="padding-top: 10px; font-family: Arial, Helvetica, sans-serif;">N1</span></strong><input id="n1" type="number"><br><br>
    <strong><span style="padding-top: 10px; font-family: Arial, Helvetica, sans-serif;">N2</span></strong><input id="n2" type="number"><br><br>
    <strong><span style="padding-top: 10px; font-family: Arial, Helvetica, sans-serif;">EX</span></strong><input id="ex" type="number"><br><br>

    <button onclick="NotaFinal()" style="background-color: #0C5BA1; color: #FFFFFF; border: none; padding: 2px; width:70px; margin-left: 23px;">Calcular</button>
    <button onclick="Limpar()" style="background-color: #0C5BA1; color: #FFFFFF; border: none; padding: 2px; width: 70px; margin-left: 20px;">Limpar</button>

</body>
</html>

关键修改点 #

• 用parseFloat(...) || 0处理空输入：当输入框为空时，parseFloat返回NaN，NaN || 0会取0，避免后续运算出现NaN。
• 补充了ex>0但MediaFinal不在指定区间时的提示逻辑，确保任何情况下用户都能得到反馈。

内容的提问来源于stack exchange，提问作者Nícolas Nascimento