JavaScript变量日志显示undefined问题排查求助

我在JavaScript代码中遇到变量日志输出异常问题：变量已正确初始化，但日志输出时始终显示undefined。多次检查拼写错误、作用域问题，并确认变量在日志输出前已赋值，仍无法定位问题。以下是复现该问题的简化代码：

var totalEmission = 0;
totalEmission = Math.trunc(totalEmission);
var flightsTotal = 0;
var carBikeTotal = 0;
var publicTransportTotal = 0;
var homeTotal = 0;

var emissionCategory = ''; 

function calculateEmission(){
    const electricityConsumption = document.getElementById('electricity').value;
    const naturalGasConsumption = document.getElementById('natural-gas').value;
    const coalConsumption = document.getElementById('coal').value;
    const woodenPelletConsumption = document.getElementById('wooden-pellets').value;
    const flightsShorterDistance = document.getElementById('flights-shorter').value;
    const flightsLongerDistance = document.getElementById('flights-longer').value;
    const carDistance = document.getElementById('car').value;
    const motorbikeDistance = document.getElementById('motorbike').value;
    const busDistance = document.getElementById('bus').value;
    const tramDistance = document.getElementById('tram').value;
    const taxiDistance = document.getElementById('taxi').value;
    const subwayDistance = document.getElementById('subway').value;
    const trainDistance = document.getElementById('train').value;

    // Perform the calculations
    const electricityEmission = electricityConsumption * 0.44;
    const naturalGasEmission = naturalGasConsumption * 0.054;
    const coalEmission = coalConsumption * 1.0;
    const woodenPelletEmission = woodenPelletConsumption * 0.06;
    const flightsShorterEmission = flightsShorterDistance * 0.20;
    const flightsLongerEmission = flightsLongerDistance * 0.33;
    const carEmission = carDistance * 0.24 * 0.07;
    const motorbikeEmission = motorbikeDistance * 0.24 * 0.05;
    const busEmission = busDistance * 0.31 * 0.6;
    const tramEmission = tramDistance * 0.023;
    const taxiEmission = taxiDistance * 0.187;
    const subwayEmission = subwayDistance * 0.040;
    const trainEmission = trainDistance * 0.041;

    // Calculate the total carbon emission
    totalEmission = electricityEmission + naturalGasEmission + coalEmission + woodenPelletEmission +
                        flightsShorterEmission + flightsLongerEmission + carEmission + motorbikeEmission +
                        busEmission + tramEmission + taxiEmission + subwayEmission + trainEmission;
    totalEmission = Math.trunc(totalEmission);
    flightsTotal = flightsLongerEmission + flightsShorterEmission;
    flightsTotal = Math.trunc(flightsTotal);
    carBikeTotal = carEmission + motorbikeEmission;
    carBikeTotal = Math.trunc(carBikeTotal);
    publicTransportTotal = taxiEmission + trainEmission + tramEmission + subwayEmission + busEmission;
    publicTransportTotal = Math.trunc(publicTransportTotal);
    homeTotal = electricityEmission + naturalGasEmission + coalEmission + woodenPelletEmission;
    homeTotal = Math.trunc(homeTotal);

    
    if (totalEmission < 2000) {
      emissionCategory = 'Good';
    } else if (totalEmission >= 2000 && totalEmission <= 5000) {
      emissionCategory = 'Fair';
    } else {
      emissionCategory = 'Bad';
    }
}

document.getElementById('calculate-btn').addEventListener('click', function(event) {
    event.preventDefault();
    calculateEmission();
    
    const urlParams = new URLSearchParams({
      carBikeTotal: carBikeTotal,
      totalEmission: totalEmission,
      flightsTotal: flightsTotal,
      publicTransportTotal: publicTransportTotal,
      homeTotal: homeTotal,
      emissionCategory: emissionCategory
    });
  
    // Redirect to the results.html page with the calculated data in the URL
    window.location.href = 'results.html?' + urlParams.toString();
    console.log(carBikeTotal);
    console.log(totalEmission);
    console.log(flightsTotal);
    console.log(publicTransportTotal);
    console.log(homeTotal);
    console.log(emissionCategory);
});

export { carBikeTotal, totalEmission, flightsTotal, publicTransportTotal, homeTotal, emissionCategory };

排查与解决建议 #

• 检查DOM元素有效性：确认所有通过getElementById获取的元素（包括按钮calculate-btn）在DOM中存在，ID拼写、大小写完全匹配。若元素不存在，document.getElementById返回null，访问null.value会抛出TypeError，导致calculateEmission中断，变量无法更新。可在代码中添加元素存在性检查：

  const btn = document.getElementById('calculate-btn');
  if (!btn) console.error('计算按钮未找到');
  

• 验证函数完整执行：在calculateEmission函数的开头和结尾添加日志，确认函数是否执行完毕，若中途报错，浏览器控制台会显示未捕获错误：

  function calculateEmission(){
      console.log('进入calculateEmission函数');
      // 原有代码
      console.log('计算完成，totalEmission:', totalEmission);
  }
  

• 处理表单值类型问题：表单元素的value是字符串类型，直接相乘可能产生NaN（比如输入非数字内容）。建议转为数字并设置默认值，避免计算异常：

  const electricityConsumption = parseFloat(document.getElementById('electricity').value) || 0;
  

• 注意模块作用域与跳转影响：代码使用export属于ES模块，变量仅在模块作用域内有效。另外，window.location.href跳转后当前页面会卸载，日志可能无法正常显示，可暂时注释跳转代码，确认变量值。
• 确认事件绑定生效：检查按钮元素是否成功绑定点击事件，避免因元素不存在导致事件未触发，calculateEmission从未执行。

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