如何用JavaScript实现符合指定规则的支出检查功能

核心实现逻辑 #

• 给「检查」按钮绑定点击事件监听器
• 点击时先将输入框的字符串值转换为数字类型，同时处理非法输入场景
• 计算总收入20%的阈值，对比支出数值后输出对应提示

补充实现代码 #

你已经完成了DOM元素获取，剩余补充代码如下：

// 给按钮绑定点击事件
btn.addEventListener('click', function() {
    // 将输入值转为数字，非法输入默认转为0
    const revenueVal = Number(revenue.value) || 0;
    const expensesVal = Number(expenses.value) || 0;
    
    // 非法输入校验（可选优化，可自行删除）
    if (revenueVal <= 0 || expensesVal < 0) {
        verdict.textContent = "请输入有效的收入和支出数值";
        return;
    }
    
    // 核心判断逻辑
    const threshold = revenueVal * 0.2;
    if (expensesVal > threshold) {
        verdict.textContent = "You spent too much!";
    } else {
        verdict.textContent = "Your expenses are in the parameters.";
    }
})

代码说明 #

• 用Number()将输入框的字符串内容转为数值，|| 0是为了处理非数字、空输入等异常场景，避免计算出现NaN错误
• 可选的输入校验逻辑可以避免用户输入负数、0收入等无效场景，你可以根据实际需求决定是否保留
• 直接通过textContent给verdict元素赋值文本，相比innerHTML更安全，可避免XSS注入风险

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