表单图表功能异常：amtSavingsInput未初始化前访问报错排查

问题场景 #

开发三个带计算与图表展示功能的表单，前两组表单/图表运行正常，第三组（仅计算逻辑不同）按相同逻辑开发时触发上述报错，尝试DOM加载完成后执行代码等方法未解决。

错误原因 #

该错误源于词法声明（let/const）的暂时性死区（TDZ）特性：代码在变量完成初始化前就尝试访问它，导致引擎抛出引用错误。结合你的场景，大概率是脚本执行时机或作用域问题导致变量声明与访问的顺序冲突。

解决方案 #

方案1：统一包裹DOM加载完成事件 #

将所有操作DOM、创建图表、绑定事件的代码放在DOMContentLoaded回调中，确保DOM元素完全渲染后再执行逻辑，同时避免变量提前访问：

document.addEventListener('DOMContentLoaded', function() {
  // 获取DOM元素
  let amtSavingsInput = document.getElementById('amt_Savings');
  let yieldSavingsInput = document.getElementById('yield_Savings');
  let amtVanguardInput = document.getElementById('amt_Vanguard');
  let yieldVanguardInput = document.getElementById('yield_Vanguard');
  const moneyMapChartElement = document.getElementById('moneyMapChart');

  // 初始化图表数据
  const chart3 = {
    labels: ['1', '2', '3', '4', '5'],
    datasets: [
      {
        label: '资产增长',
        data: [],
        backgroundColor: 'rgba(75, 192, 192, 0.6)',
        borderWidth: 1
      }
    ]
  };

  // 创建图表实例
  const moneyMapChart = new Chart(moneyMapChartElement, {
    type: 'bar',
    data: chart3,
    options: {
      responsive: false,
      scales: {
        y: {
          type: 'linear',
          beginAtZero: true
        }
      }
    }
  });

  // 计算与更新图表逻辑
  function updateChart() {
    let amtSavings = parseFloat(amtSavingsInput.value) || 0;
    let yieldSavings = parseFloat(yieldSavingsInput.value) || 0;
    let amtVanguard = parseFloat(amtVanguardInput.value) || 0;
    let yieldVanguard = parseFloat(yieldVanguardInput.value) || 0;

    // 转换为年度金额
    amtSavings *= 12;
    amtVanguard *= 12;

    const years = 5;
    const capitals = calculateCapitalGrowth(amtSavings, yieldSavings, amtVanguard, yieldVanguard, years);

    moneyMapChart.data.datasets[0].data = capitals;
    moneyMapChart.update();
  }

  // 绑定输入事件监听
  amtSavingsInput.addEventListener('input', updateChart);
  yieldSavingsInput.addEventListener('input', updateChart);
  amtVanguardInput.addEventListener('input', updateChart);
  yieldVanguardInput.addEventListener('input', updateChart);

  // 补充定义计算函数（需替换为你的实际逻辑）
  function calculateCapitalGrowth(amtSavings, yieldSavings, amtVanguard, yieldVanguard, years) {
    const result = [];
    let totalCapital = 0;
    for (let i = 0; i < years; i++) {
      totalCapital += amtSavings * (1 + yieldSavings / 100) + amtVanguard * (1 + yieldVanguard / 100);
      result.push(Math.round(totalCapital));
    }
    return result;
  }
});

方案2：额外检查项 #

1. 补充缺失的Canvas元素：你的HTML代码中未包含id="moneyMapChart"的canvas标签，需添加：

   <canvas id="moneyMapChart" width="400" height="300"></canvas>
   

2. 脚本放置位置：将脚本标签放在HTML的<body>末尾，确保DOM元素渲染完成后再执行脚本
3. 避免重复声明变量：检查全局作用域或函数内是否有重复声明amtSavingsInput等变量的情况

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