Rails项目中CoffeeScript获取输入值计算时遇变量未定义错误求助

咱们一步步拆解你遇到的问题，然后给出完整的修复方案：

1. 核心错误：变量作用域问题 #

你当前的代码里，price、mortgage、rent都是各自change回调函数里的局部变量，回调外部的代码（比如创建Calculation实例的那一行）根本访问不到这些变量——这就是为什么会报price is not defined的根本原因。

2. CoffeeScript类的写法错误 #

你的Calculation类定义存在几个语法和逻辑问题：

• 类的方法需要用methodName: ->的格式，而非直接monthly_savings ->
• 构造函数里没有把传入的参数赋值给实例属性，导致类内方法无法访问@price、@mortgage、@rent
• savings方法没有正确引用实例的其他方法，且未处理边界情况（比如除以0）

3. 事件触发逻辑不合理 #

现在的代码只在#rent的change事件里执行计算，但实际需求应该是任何一个输入框的值变化时，都重新计算结果，而不是只等最后一个输入框修改。

修正后的完整代码 #

CoffeeScript 部分

# 先定义规范的计算类
class Calculation
  constructor: (price, mortgage, rent) ->
    # 将传入的参数转为数字并赋值给实例属性，默认0避免空值报错
    @price = parseFloat(price) || 0
    @mortgage = parseFloat(mortgage) || 0
    @rent = parseFloat(rent) || 0

  # 计算每月储蓄额
  monthlySavings: ->
    @mortgage - @rent

  # 计算储蓄目标（房价的3%）
  savingsGoal: ->
    @price * 0.03

  # 计算所需月数，处理月储蓄为0/负数的边界情况
  monthsToBuy: ->
    monthly = @monthlySavings()
    if monthly <= 0
      Infinity # 表示无法达成目标
    else
      Math.ceil(@savingsGoal() / monthly)

  # 计算总储蓄额
  totalSavings: ->
    @monthlySavings() * @monthsToBuy()

# 辅助函数：获取并格式化输入值（移除千分位逗号）
getInputValues = ->
  price = $('#price').val().replace(/,/g, '')
  mortgage = $('#mortgage').val().replace(/,/g, '')
  rent = $('#rent').val().replace(/,/g, '')
  { price, mortgage, rent }

# 核心计算函数：获取输入、创建实例、更新DOM
updateCalculation = ->
  { price, mortgage, rent } = getInputValues()
  # 确保三个输入都有有效值才计算
  if price && mortgage && rent
    calculation = new Calculation(price, mortgage, rent)
    $('#total_savings').val(calculation.totalSavings())
    $('#months').val(calculation.monthsToBuy())
  else
    # 输入不完整时清空结果
    $('#total_savings').val('')
    $('#months').val('')

# 给三个输入框绑定change事件，任何一个变化都触发计算
$('#price, #mortgage, #rent').on 'change', updateCalculation

关键优化点说明

• 作用域修复：通过辅助函数统一获取输入值，避免局部变量无法访问的问题
• 类的规范：修正了类方法的写法，在构造函数里正确赋值实例属性，还处理了月储蓄为0/负数的边界情况
• 输入格式化：移除用户输入的千分位逗号，确保能正确转为数字计算
• 事件优化：用多选择器一次性绑定三个输入框的事件，符合“任何输入变化都重新计算”的需求

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