JS代码无法获取用户输入的partPrice，请求排查逻辑错误并解释

Hey there, let's break down why your code isn't grabbing the input value correctly and fix it step by step!

核心问题拆解 #

• 提前获取输入值的误区：你在页面刚加载时就执行了var partPrice = document.getElementById("partPrice").value;，这时候用户还没在输入框里输入任何内容，所以partPrice拿到的是空字符串。而且之后用户输入内容时，这个变量也不会自动更新——你得在点击按钮的瞬间重新获取最新的输入值才行。
• 变量作用域冲突：你在calcTotal函数里又用var totalPrice重新声明了变量，这会创建一个函数内部的局部变量，和外面定义的totalPrice完全没关系，可能导致alert弹窗出现意外的结果。
• 字符串与数字的类型不匹配：输入框的value属性返回的是字符串类型，直接和数字做运算会出问题（比如输入"20"的话，"20"+1.5会变成"201.5"而不是预期的21.5），必须把它转换成数字类型再进行计算。

修改后的完整代码 #

<!DOCTYPE html>
<html>
<head>
    <title> Unit 2 Graded Exercise 1 </title>
</head>
<body>
    <header>
        <h1>Unit 2 Graded Exercise 1</h1>
        <br/>
    </header>
    <form>
        <fieldset>
            <label for="price" id="label">Purchase Price</label>
            <input type="text" id="partPrice" />
            <button type="button" id="button">Calculate Shipping and Handling</button>
        </fieldset>
    </form>
    <script>
        // 不需要提前声明partPrice，我们在点击按钮时再获取最新值
        function calcTotal() {
            // 点击时获取输入值并转换为数字类型
            var partPrice = parseFloat(document.getElementById("partPrice").value);
            
            // 新增输入校验：确保用户输入的是有效数字
            if (isNaN(partPrice)) {
                alert("Please enter a valid number for the purchase price!");
                return;
            }
            
            var totalPrice;
            if (partPrice <= 25) {
                totalPrice = partPrice + 1.5;
            } else {
                totalPrice = partPrice * 1.1; // 等价于 原价 + 10%运费，写法更简洁
            }
            // 用toFixed(2)保留两位小数，符合货币显示规范
            alert("Shipping and Handling is $" + totalPrice.toFixed(2));
        }

        var submitButton = document.getElementById("button");
        if (submitButton.addEventListener) {
            submitButton.addEventListener("click", calcTotal, false);
        } else if (submitButton.attachEvent) {
            submitButton.attachEvent("onclick", calcTotal);
        }
    </script>
</body>
</html>

关键修改说明 #

1. 将partPrice的获取逻辑移到calcTotal函数内部，确保每次点击按钮都能拿到用户最新的输入值。
2. 使用parseFloat()将输入的字符串转换成数字，避免字符串与数字运算的异常。
3. 添加输入校验逻辑，当用户输入非数字内容时给出提示，提升交互体验。
4. 去掉函数内部重复声明的var totalPrice，让变量作用域更清晰。
5. 用toFixed(2)格式化结果，保证显示的金额是两位小数的规范格式。

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