JavaScript实现下拉框选中时15%折扣功能的问题求助

原代码的核心问题 #

• 混淆原生JS与jQuery语法：原生JS中DOM元素取值用.value，而非jQuery的.val方法
• 变量作用域错误：函数外的代码试图访问sumValues内部的局部变量dropdown和sum，导致变量未定义，计算返回NaN
• 独立折扣函数逻辑混乱：参数result未被使用，反而引用未定义的sum，同时存在.val的语法错误

修正后的完整代码 #

function sumValues() {
    // 获取页面元素
    var dropdown = document.getElementById("dropdown");
    var radioButtons = document.getElementsByName("radio");
    var checkboxes = document.querySelectorAll('input[type="checkbox"]:checked');
    
    var sum = 0;

    // 累加下拉框选中值
    if (dropdown.value !== "0") {
        sum += parseInt(dropdown.value);
    }

    // 累加选中的单选框值
    for (var i = 0; i < radioButtons.length; i++) {
        if (radioButtons[i].checked) {
            sum += parseInt(radioButtons[i].value);
        }
    }

    // 累加选中的复选框值
    for (var i = 0; i < checkboxes.length; i++) {
        sum += parseInt(checkboxes[i].value);
    }

    // 计算最终金额并生成显示文本
    var finalAmount = sum;
    var displayText = "Total price of products and/or services selected:$ ";
    if (dropdown.value !== "0") {
        finalAmount = sum * 0.85;
        displayText = "Total discounted price of products and/or services selected:$ ";
    }

    // 格式化显示结果（保留两位小数）
    document.getElementById("result").innerHTML = displayText + finalAmount.toFixed(2);
}

关键修改说明 #

1. 修正取值语法：所有dropdown.val替换为dropdown.value，符合原生JS规范
2. 整合折扣逻辑：将折扣判断放在sumValues函数内部，确保能访问到计算好的sum变量
3. 优化价格显示：用toFixed(2)保留两位小数，避免出现不合理的多位小数价格
4. 统一文本控制：通过变量管理显示文本，减少重复DOM操作

触发方式示例 #

需要给表单元素绑定change事件来触发计算：

<select id="dropdown" onchange="sumValues()">
    <option value="0">请选择</option>
    <option value="100">商品A</option>
    <option value="200">商品B</option>
</select>

<input type="radio" name="radio" value="50" onchange="sumValues()"> 服务1
<input type="radio" name="radio" value="80" onchange="sumValues()"> 服务2

<input type="checkbox" value="30" onchange="sumValues()"> 附加项1
<input type="checkbox" value="40" onchange="sumValues()"> 附加项2

<div id="result"></div>

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