JavaScript折扣求和计算器代码求助：实现折扣逻辑与输入框控制

看起来你的代码里有不少语法错误、逻辑不符需求的问题，我帮你一步步排查并修复了，下面是详细的问题点和完整的可运行代码：

原代码的主要问题： #

• 语法错误：if ( c >= 100 {缺少闭合括号);，函数末尾也没加}闭合，还有else if (c<100 && total) 500 )逻辑完全混乱，不符合语法规范
• ID匹配错误：你要修改第三个输入框（id是text3），但代码里写的是document.getElementById('text').value = c;，ID名称完全不匹配
• 需求逻辑不符：原代码的折扣阈值是100、500，和你要求的<50、50-300、≥300完全不一致
• 变量未定义/拼写错误：用到了未定义的total变量，doscount是拼写错误，应该是discount
• HTML标签错误：<input>是自闭合标签，不需要写</input>
• 功能缺失：没有把折扣信息显示出来，也没处理非数字输入的异常情况
• 输入框权限未设置：第三个输入框没加readonly属性，无法实现不可编辑的要求

修复后的完整代码 #

<h1>BUY</h1>
<input type="text" value="" id="text1" placeholder="输入价格1"> + 
<input type="text" value="" id="text2" placeholder="输入价格2"> = 
<input type="text" value="" id="text3" readonly>
<div id="discountInfo" style="margin-top:10px;color:#333;"></div> <!-- 专门用来显示折扣信息 -->
<input type="button" value="计算总价" onclick="myCalculator()">

<script>
function myCalculator() {
    // 获取输入值并转为数字，处理非数字输入的异常情况
    let price1 = parseFloat(document.getElementById('text1').value) || 0;
    let price2 = parseFloat(document.getElementById('text2').value) || 0;
    let sum = price1 + price2;
    
    // 更新第三个输入框的总和，保留两位小数更符合价格显示规范
    document.getElementById('text3').value = sum.toFixed(2);
    
    let discountText = "";
    let discountedPrice = sum;
    
    // 严格按照需求的阈值判断折扣
    if (sum < 50) {
        discountText = `SUM是${sum.toFixed(2)} - 无折扣`;
    } else if (sum >= 50 && sum < 300) {
        discountedPrice = sum * 0.9; // 10%折扣：总价乘以0.9
        discountText = `SUM是${sum.toFixed(2)} - 10%折扣，折后价：${discountedPrice.toFixed(2)}`;
    } else if (sum >= 300) {
        discountedPrice = sum * 0.8; // 20%折扣：总价乘以0.8
        discountText = `SUM是${sum.toFixed(2)} - 20%折扣，折后价：${discountedPrice.toFixed(2)}`;
    }
    
    // 把折扣信息显示到页面上
    document.getElementById('discountInfo').textContent = discountText;
}
</script>

修复说明： #

1. 修正语法问题：补全了所有缺失的括号和函数闭合，重新梳理了if-else的逻辑结构
2. 匹配正确ID&权限：将修改第三个输入框的代码改为document.getElementById('text3')，并添加readonly属性实现不可编辑
3. 对齐需求逻辑：严格按照你要求的阈值（<50、50-300、≥300）设置折扣条件
4. 处理输入异常：用parseFloat替代parseInt（支持小数价格），并通过|| 0处理用户输入非数字的情况，避免出现NaN错误
5. 优化显示效果：新增discountInfo的div专门显示折扣信息，同时总价和折后价都保留两位小数，更符合实际价格展示习惯
6. 修正拼写错误：把doscount改为正确的discount
7. 简化函数调用：直接在函数内部获取输入框值，不需要通过参数传递，代码更简洁易维护

现在你可以直接运行这段代码，输入两个价格点击按钮就能看到正确的总和和折扣信息啦！

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