DOM操作异常：简易银行Demo中函数无法更新显示DOM元素

核心排查点及解决方法 #

• DOM元素加载顺序问题
  如果JS代码在HTML结构加载完成前执行，document.querySelector会返回null，后续修改textContent自然不会生效。
  修复方式：

  • 将JS代码放在HTML文档的</body>标签之前，确保DOM元素已渲染完成
  • 用DOMContentLoaded事件包裹代码，等待DOM加载完成后再执行逻辑：

    document.addEventListener('DOMContentLoaded', function() {
      const labelSumIn = document.querySelector('.summary__value--in');
      const labelSumOut = document.querySelector('.summary__value--out');
    
      const calcDisplaySummary = function(movements) {
        const incomes = movements.filter(mov => mov > 0).reduce((ak, cur) => ak + cur, 0);
        labelSumIn.textContent = `${incomes}€`;
        const out = movements.filter(mov => mov < 0).reduce((ak, cur) => ak + cur, 0);
        labelSumOut.textContent = `${Math.abs(out)}€`;
      };
    
      calcDisplaySummary([1,-1,2,-3]);
    });
    

• 函数声明方式隐患
  原代码中calcDisplaySummary未用const/function显式声明，属于全局隐式变量，可能被其他代码覆盖导致未执行。建议规范声明函数：

  const calcDisplaySummary = function(movements) {
    // 原有计算逻辑
  };
  

• 调试验证步骤

  1. 打开浏览器控制台（F12），查看是否存在Cannot set property 'textContent' of null报错，若有则说明元素未正确获取
  2. 在函数内部添加console.log(incomes, out)，确认计算结果是否符合预期

内容的提问来源于stack exchange，提问作者Miloš Grujić