JS会员计费程序无法更新变量显示总费用及自动应用折扣求助

问题说明 #

需要实现的核心逻辑：用户选择会员类型、输入购买年数后自动计算总费用，购买年数大于1时享受20%折扣（即总费用打8折），原有代码运行无法得到正确结果。

原有代码 #

HTML代码 #

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>会员表单</title>
    <link rel="stylesheet" href="css/form.css">
</head>
<body>
    <form action="" method="post" id="theForm">
        <script src="js/membership.js"></script>
        <fieldset><legend>创建你的会员</legend>
            <p>填写表单计算会员费用，购买超过1年可享受20%折扣！</p>
            <div><label for="type">会员类型</label> <select name="type" id="type" required>
                <option value="basic">基础版 - $10.00</option>
                <option value="premium">高级版 - $15.00</option>
                <option value="gold">黄金版 - $20.00</option>
                <option value="platinum">铂金版 - $25.00</option>
            </select></div>
            <div><label for="years">购买年数</label><input type="number" name="years" id="years" min="1" required></div>
            <div><label for="cost">总费用</label><input type="text" name="cost" id="cost" disabled></div>
            <input type="submit" value="计算费用" id="submit">
        </fieldset>
    </form>
</body>
</html>

原有错误JS代码 #

'use strict';
    
    
function calculate() {
  
    // 声明变量存储总费用
    var cost;

    // 用DOM方法获取会员类型和购买年数的输入元素
    var type = document.getElementById("type");
    var years = document.getElementById("years");

    // 把年数转为数字，原代码不确定这一步是否生效
    if (years && years.value) {
        years = parseInt(years.value, 10);
    }

    // 校验所有数据合法
    if (type && type.value && years && (years > 0)) {

        // switch语句根据会员类型确定基础费用
        switch (type.value) {
            case 'basic':
                cost = "$10.00";
            break;
        case 'premium':
            cost = "$15.00";
            break;
        case 'gold':
            cost = "$20.00";
            break;
        case 'platinum':
            cost = "$25.00";
            break;
        }

        // 乘以年数更新总费用
        cost = cost * years;
        // 多年购买折扣
        if (years > 1) {
            cost *= 0.80; // 打8折
        }

        let costElement = document.getElementById('cost');

        // 把cost转为数字并保留两位小数
         cost = parseFloat(cost.substr(1));
        // 更新费用输入框的值
    }       costElement = type + cost;
    // 阻止表单提交
    return false;
}
function init() {
    document.getElementById('theForm').onsubmit = calculate;
}
window.onload = init;

错误点梳理 #

• 基础费用赋值为带$符号的字符串，直接和年数相乘会得到NaN非数字结果
• 计算完年数和折扣后，对已经是数字类型的cost调用字符串方法substr，直接触发运行时错误
• costElement变量定义在if块内部，块外赋值语句访问不到该变量，属于作用域错误
• 最终赋值逻辑错误，没有把计算结果赋值给费用输入框的value属性，而是错误地把DOM对象和数字相加赋值给变量

修正后JS代码 #

'use strict';

function calculate() {
    // 声明变量存储费用
    let baseCost, totalCost;

    // 提前获取所有DOM元素
    const typeSelect = document.getElementById("type");
    const yearsInput = document.getElementById("years");
    const costInput = document.getElementById('cost');

    // 年数转整数
    const years = parseInt(yearsInput.value, 10);

    // 校验数据合法性，不合法直接清空费用返回
    if (!typeSelect.value || isNaN(years) || years < 1) {
        costInput.value = '';
        return false;
    }

    // 按会员类型取基础费用，直接存数字避免字符串运算错误
    switch (typeSelect.value) {
        case 'basic':
            baseCost = 10;
            break;
        case 'premium':
            baseCost = 15;
            break;
        case 'gold':
            baseCost = 20;
            break;
        case 'platinum':
            baseCost = 25;
            break;
        default:
            baseCost = 0;
    }

    // 计算总费用
    totalCost = baseCost * years;
    // 超过1年打8折
    if (years > 1) {
        totalCost *= 0.8;
    }

    // 计算完成后再格式化，保留两位小数加$符号赋值给输入框
    costInput.value = `$${totalCost.toFixed(2)}`;

    // 阻止表单默认提交行为
    return false;
}

function init() {
    document.getElementById('theForm').onsubmit = calculate;
}

window.onload = init;

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