解决JavaScript中变量相乘返回NaN的问题（碳足迹计算器场景）

你得到NaN的直接原因是把数组person当成函数调用了：person()。person是一个Array实例，不是可调用的函数，执行person()会导致该表达式返回undefined（非严格模式），和数字相乘后结果就是NaN。

除此之外，你的逻辑设计存在缺陷：燃料的排放量需要和用户选择的家庭人数动态关联，但你现在是在页面加载时就提前计算了fuel的所有值，这时候用户还没选择人数，根本无法得到正确的关联数值。

1. 修正数据结构（可选但推荐） #

用普通对象代替数组存储person和燃料基础配置，因为你用的是字符串键，数组的索引应为数字，用对象更符合语义：

// 替换原person数组为对象
const person = {
  person1: 1,
  person2: 2,
  person3: 3,
  person4: 4
};

// 只存储燃料的基础倍数，不提前计算最终值
const fuelBase = {
  None: 0,
  fuel1: 1,
  fuel2: 1.5,
  fuel3: 2,
  fuel4: 2.5,
  fuel5: 3,
  fuel6: 3.5,
  fuel7: 4,
  fuel8: 4.5,
  fuel9: 5,
  fuel10: 5.5,
  fuel11: 6,
  fuel12: 6.5
};

2. 动态计算燃料排放量 #

在getFueltotal函数里，结合当前选择的家庭人数计算最终燃料排放量：

function getFueltotal() {
  const theForm = document.forms["energyform"];
  const selectedFuelValue = theForm.elements["fuel"].value;
  // 获取当前选择的家庭人数
  const personCount = getNumberperson();
  // 基础公式：525磅/100升 * 年度月份数(12) * 燃料倍数 * 人数
  return 525 * 12 * fuelBase[selectedFuelValue] * personCount;
}

3. 移除错误的提前计算代码 #

删除原代码中这一行错误的初始化：

// 删掉这行
fuel["fuel1"]=525*1*12*person();

完整修改后的JavaScript代码 #

<script>
const person = {
  person1: 1,
  person2: 2,
  person3: 3,
  person4: 4
};

const fuelBase = {
  None: 0,
  fuel1: 1,
  fuel2: 1.5,
  fuel3: 2,
  fuel4: 2.5,
  fuel5: 3,
  fuel6: 3.5,
  fuel7: 4,
  fuel8: 4.5,
  fuel9: 5,
  fuel10: 5.5,
  fuel11: 6,
  fuel12: 6.5
};

function getNumberperson() {  
  let numberperson = 0;
  const theForm = document.forms["energyform"];
  const selectedPerson = theForm.elements["selectedperson"];
  for(let i = 0; i < selectedPerson.length; i++) {
      if(selectedPerson[i].checked) {
          numberperson = person[selectedPerson[i].value];
          break; // 找到选中项后直接跳出循环，优化性能
      }
  }
  return numberperson;
}

function getFueltotal() {
  const theForm = document.forms["energyform"];
  const selectedFuelValue = theForm.elements["fuel"].value;
  const personCount = getNumberperson();
  return 525 * 12 * fuelBase[selectedFuelValue] * personCount;
}

function calculateTotal() {
  // 补充原注释提到的垃圾排放量计算：每人每年692磅
  const personCount = getNumberperson();
  const wasteEmission = personCount * 692;
  const fuelEmission = getFueltotal();
  const totalEmission = wasteEmission + fuelEmission;
  
  document.getElementById('totalPrice').innerHTML = totalEmission;
}

function hideTotal() {
  document.getElementById('totalPrice').innerHTML = "0";
} 
</script>

额外优化提示 #

• 原代码中calculateTotal里的变量名cakePrice完全不符合语义，已改为totalEmission，提升代码可读性。
• 原注释提到“每人每年产生的垃圾会排放692磅二氧化碳”，原代码未计算这部分，修改后的代码已补上该逻辑，若不需要可自行删除。

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