百分比增长计算器无法正常运行，请求技术协助

我正在制作一个基于初始值的jQuery百分比增长计算器，示例计算如下：

• 1000 + 10% = 1100
• 1000 + 25% = 1250
• 1000 + 39% = 1390

但我的代码无法正常运行，以下是我的代码，请求协助排查问题。

HTML #

<input type="text" id="Amount" value="">
<input type="text" value="10.45" id="Discount">
<input type="text" id="Result">

Script #

$(document).on("change keyup blur", "#Discount", function() {
    var main = $('#Amount').val();
    var disc = $('#Discount').val();
    var dec = (disc / 100); //toFixed(0) == its convert 10 into 0.10
    var mult = main * dec; // gives the value for subtract from main value
    var discont = main + mult;
    $('#Result').val(discont.toFixed(0));
});

问题排查及修复方案 #

1. 事件监听范围不全：原代码只监听了#Discount的变化，修改初始金额#Amount时结果不会自动更新，需要同时监听两个输入框的事件。
2. 字符串转数字处理缺失：input取值默认是字符串类型，直接运算可能出现异常（比如空值或非数字输入会得到NaN），需要显式转换为数字并做合法性校验。
3. 变量名语义错误：discont是拼写错误，改为increasedAmount更贴合“增长计算”的语义；注释里写的“subtract from main value”和实际增长逻辑矛盾，需要修正。
4. 空值/非法输入处理：当初始金额为空或输入非数字时，结果框需要清空，避免显示无意义的NaN。

修复后的代码 #

// 同时监听Amount和Discount的输入事件
$(document).on("change keyup blur", "#Amount, #Discount", function() {
    // 转为数字，空值或非数字则设为0
    var main = parseFloat($('#Amount').val()) || 0;
    var disc = parseFloat($('#Discount').val()) || 0;
    
    // 计算增长后的金额
    var increaseRate = disc / 100;
    var increasedAmount = main * (1 + increaseRate);
    
    // 只有初始金额有效时才显示结果
    $('#Result').val(main > 0 ? increasedAmount.toFixed(0) : '');
});

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