使用JavaScript多区域展示相同值时数量和总金额无输出如何解决

• 更新逻辑仅在JS文件加载时执行了一次，按钮点击事件中仅更新了顶部的点击计数，没有同步更新summary区域的数量和总金额，所以点击后数值不会变化
• 总金额计算逻辑错误：代码中直接将DOM元素对象disp2乘以12，没有使用数字类型的计数变量count计算，同时也没有将计算结果赋值给总金额对应DOM的innerHTML属性，所以总金额无法正常显示
• 存在冗余/风险操作：你在head和body中重复引入了两次try2.js，如果保留head中的引入，JS执行时DOM还未完全渲染，会导致获取DOM元素失败

1. 首先修改HTML代码，删除head标签中的<script type = "text/javascript" src = "try2.js" ></script>，仅保留body末尾的JS引入即可，保证JS执行时所有DOM都已加载完成。
2. 将JS代码替换为以下内容：

var buttons = document.getElementsByClassName("button");
var count = 0;
var disp = document.getElementById("display");
var disp2 = document.getElementById("display2");
var totalSum = document.getElementById("total-sum");

// 封装summary区域更新逻辑
function updateSummary() {
  disp2.innerHTML = count;
  // 按单份12元计算总金额，赋值给对应DOM元素
  totalSum.innerHTML = count * 12;
}

for (let i = 0, l = buttons.length; i < l; i++) {
  buttons[i].addEventListener('click', function() {
    this.classList.toggle('active');
    count = this.classList.contains("active") ? count + 1 : count - 1;
    disp.innerHTML = count;
    // 每次点击按钮后都更新summary区域
    updateSummary();
  })
}

// 页面初始化时更新一次，保证初始状态显示正确
updateSummary();

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