JavaScript实现停车费计算功能时页面输出undefined问题求助

算力阿峰

2026-9-30

问题根因

你代码里的undefined输出主要来自以下几个bug：

打印变量未初始化：printOutTotalParkingCost1仅在totalParkingCost1 > 0的条件下才声明赋值，只要条件不满足（比如停车费输入为空、日期计算结果为NaN），这个变量就是未定义状态，直接打印就会输出undefined。
日期变量被重复声明覆盖：你先在日期无效的判断分支里给result/nrOfWeeks/nrOfMonths赋值了默认值1，但后续又用var重新声明了这三个变量，再计算赋值时如果日期无效会得到NaN，覆盖了之前的默认值，导致停车费计算结果为NaN，无法触发变量赋值条件。
代码执行顺序错误：如果resume()函数里先执行停车费计算逻辑，再执行日期变量计算逻辑，停车费计算时用到的result等变量还没被赋值，也会出现undefined。

修复方案

1. 修复日期变量重复声明问题

修改预先定义的日期计算代码，去掉重复的var声明，增加NaN容错：

// 原有判断日期是否有效的逻辑保留，修改后续计算部分
var difference = Math.abs(checkOutDate-checkInDate);
// 移除var，直接赋值避免覆盖前面的默认值
result = difference/(1000*3600*24);
nrOfMonths = Math.ceil(result/30.41);
nrOfWeeks = Math.ceil(result/7);
// 新增容错：如果计算结果为NaN，保留默认值1
if(isNaN(result)){
    result = 1;
    nrOfWeeks = 1;
    nrOfMonths = 1;
}

2. 修复停车费计算逻辑，初始化打印变量

修改停车费计算代码：

var parking_cost1 = 0;
var parkingCostUnity1 = 0;
var parkingCostFrequency1 = 0;
// 优化数字取值容错，空值默认转0
parking_cost1 = parseFloat(document.getElementById("parking_cost1").value) || 0;
parkingCostFrequency1 = document.getElementById("parking_cost1_frequence1").value;
if (parkingCostFrequency1 == "per_night") {
  parkingCostUnity1 = result;
} else if (parkingCostFrequency1 == "per_week") {
  parkingCostUnity1 = nrOfWeeks;
} else if (parkingCostFrequency1 == "per_month") {
  parkingCostUnity1 = nrOfMonths;
}

var echoParkingCostFrequency1 = parkingCostFrequency1.replace("_", " ");
var totalParkingCost1 = parkingCostUnity1 * parking_cost1;
// 先初始化打印变量为空字符串，避免未定义
var printOutTotalParkingCost1 = '';
// 增加NaN判断，避免无效值进入
if (!isNaN(totalParkingCost1) && totalParkingCost1 > 0) {
  printOutTotalParkingCost1 = '<tr><td><b>Total parking cost</b></td><td>' + parking_cost1 + ' ' + currency + ' ' + echoParkingCostFrequency1 + '</td><td>' + totalParkingCost1 + ' ' + currency + '</td></tr>';
}

3. 修复HTML非标准标签

把非标准的<text>标签换成标准<span>标签：

<i class="fas fa-parking"></i> <span class="form_basic_text">Parking cost</span><br>
<input type="number" onChange="resume()" name="parking_cost1" id="parking_cost1" class="form_basic_field_bid" style="width:auto;" /><br/>
<center>
  <select onChange="resume()" name="parking_cost1_frequence1" id="parking_cost1_frequence1" style="width:auto;height:25px;padding:0px;width:auto;">
    <option value="per_night">Per night</option>
    <option value="per_week">Per week</option>
    <option value="per_month">Per month</option>
  </select>
</center>

4. 调整代码执行顺序

确保resume()函数里，先执行日期变量计算逻辑，再执行停车费计算逻辑，避免变量未定义。

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