JavaScript新手实现月供计算器：makeLogo函数变量错误求助

核心错误点 #

• 函数参数与全局变量冲突：全局已获取loanAmount等DOM元素，但makeLogo函数定义了同名参数，调用时未传参，导致函数内的变量为undefined，访问.value直接报错。
• 公式运算符优先级错误：月供公式的分母未加括号，当前写法/1 -(1+ i)** -(n)会先执行除法再减法，完全偏离正确计算逻辑，正确分母应为1 - (1 + i)**-n。
• 输入值未转数值：DOM元素的value是字符串类型，直接参与计算会出现非预期结果（如字符串相乘会拼接），需转换为数值类型。
• 利率计算逻辑缺失：用户输入的利率通常是百分比（如5代表5%），未除以100会导致利率数值过大，计算结果错误。

修复后的代码 #

const loanAmount = document.getElementById('loan-amount');
const loanYears = document.getElementById('loan-years');
const loanRate = document.getElementById('loan-Rate');
const span = document.querySelector('span');
const form = document.getElementById("calc-form");

form.addEventListener("submit", function (e) {
    e.preventDefault();
    // 调用时传入全局获取的DOM元素
    calculateMonthlyPayment(loanAmount, loanYears, loanRate);
});

// 重命名函数，语义更贴合功能
function calculateMonthlyPayment(amountEl, yearsEl, rateEl) {
    // 转换为数值，同时处理空值/非数字的容错情况
    const principle = parseFloat(amountEl.value) || 0;
    const n = parseFloat(yearsEl.value) * 12 || 0;
    // 处理百分比利率：先转小数再除以12
    const i = (parseFloat(rateEl.value) / 100) / 12 || 0;

    // 修复公式括号，同时避免n为0时的计算错误
    const monthlyPayment = n === 0 ? 0 : (principle * i) / (1 - (1 + i)**-n);

    // 格式化金额为两位小数，符合显示习惯
    span.innerText = monthlyPayment.toFixed(2);
}

额外优化说明 #

• 函数名改为calculateMonthlyPayment，避免语义混淆；
• 增加输入容错处理，防止非数字输入导致的计算报错；
• 结果用toFixed(2)格式化，保证月供显示为标准金额格式。

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