新手求助：JavaScript基础计算器仅乘法可用，新增运算后功能崩溃

首先梳理初始代码里的潜在问题，这些可能是你扩展功能时崩溃的诱因：

• calculateTotalFee里引用了$('#input-monthly-cost')，但你的输入控件实际是#input-monthly-budget，这会导致获取到NaN，引发计算异常
• 未处理输入为空、非数字的情况，一旦输入无效值，计算会返回NaN，进而导致页面显示异常

以下是逐步扩展运算功能的稳定方案：

1. 修复初始代码的bug #

把calculateTotalFee里的$('#input-monthly-cost').val()改成$('#input-monthly-budget').val()，避免不必要的NaN。

2. 添加运算选择控件 #

在HTML中添加运算类型选择的单选框：

<div>
  <label><input type="radio" name="operation" value="multiply" checked> 乘法</label>
  <label><input type="radio" name="operation" value="add"> 加法</label>
  <label><input type="radio" name="operation" value="subtract"> 减法</label>
  <label><input type="radio" name="operation" value="divide"> 除法</label>
</div>

3. 重构计算函数，支持多运算 #

修改calculateTotalFee，根据选中的运算执行对应逻辑，同时处理输入无效的情况：

function calculateTotalFee(){
  // 获取输入值，默认0避免NaN
  const monthCost = Number($('#input-lost-hours').val()) || 0;
  const costHr = Number($('#input-hour-cost').val()) || 0;
  // 获取选中的运算类型
  const operation = $('input[name="operation"]:checked').val();
  
  let result;
  switch(operation) {
    case 'add':
      result = monthCost + costHr;
      break;
    case 'subtract':
      result = monthCost - costHr;
      break;
    case 'multiply':
      result = monthCost * costHr;
      break;
    case 'divide':
      // 处理除数为0的情况，避免崩溃
      result = costHr !== 0 ? monthCost / costHr : 0;
      break;
    default:
      result = 0;
  }
  return result;
}

4. 绑定运算切换事件 #

添加运算选择的监听，切换运算时自动更新结果：

$('input[name="operation"]').on('change', function(){
  $('#text-monthly-fee').text(formatNumber(calculateTotalFee()));
});

5. 增强输入容错性 #

修改formatNumber函数，处理NaN或非数字的情况：

function formatNumber(num){
  // 先确保是有效数字
  const validNum = isNaN(num) ? 0 : Number(num);
  return new Intl.NumberFormat().format(validNum);
}

完整修改后的代码示例 #

<script data-info='hacks-body'>
// on lost hours input
$('#input-lost-hours').on('input', function(){
  $('#text-lost-hours').text(formatNumber($(this).val()));  
  $('#text-monthly-fee').text(formatNumber(calculateTotalFee()));
});

// on cost hour input
$('#input-hour-cost').on('input', function(){
  $('#text-cost-hour').text(formatNumber($(this).val()));  
  $('#text-monthly-fee').text(formatNumber(calculateTotalFee()));
});

// on budget input
$('#input-monthly-budget').on('input', function(){
  $('#text-freelance-budget').text(formatNumber($(this).val()));  
  $('#text-total-budget').text(formatNumber(calculateBudgetTotal()));
});

// 运算选择切换事件
$('input[name="operation"]').on('change', function(){
  $('#text-monthly-fee').text(formatNumber(calculateTotalFee()));
});

// 计算核心运算结果
function calculateTotalFee(){
  const monthCost = Number($('#input-lost-hours').val()) || 0;
  const costHr = Number($('#input-hour-cost').val()) || 0;
  const operation = $('input[name="operation"]:checked').val();
  
  let result;
  switch(operation) {
    case 'add':
      result = monthCost + costHr;
      break;
    case 'subtract':
      result = monthCost - costHr;
      break;
    case 'multiply':
      result = monthCost * costHr;
      break;
    case 'divide':
      result = costHr !== 0 ? monthCost / costHr : 0;
      break;
    default:
      result = 0;
  }
  return result;
}

// 计算预算相关结果（按需扩展）
function calculateBudgetTotal(){
  const monthBudget = Number($('#input-monthly-budget').val()) || 0;
  const servFee = Number($('#text-service-fee').text()) || 0;
  return monthBudget + servFee;
}

// 格式化数字，处理无效值
function formatNumber(num){
  const validNum = isNaN(num) ? 0 : Number(num);
  return new Intl.NumberFormat().format(validNum);
}
</script>

关键注意点 #

• 所有输入值都要做非空/非数字处理，用|| 0确保不会出现NaN
• 除法运算必须判断除数是否为0，避免抛出错误
• 新增的运算控件要绑定事件，确保切换时实时更新结果
• 拆分函数时保证每个函数职责单一，比如把核心运算和预算运算分开，避免逻辑混乱

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