HTML中getElementById与addEventListener不生效 弹窗visibility切换功能异常

• JS执行时机早于DOM渲染：如果你的JS代码放在<head>标签内，或者放在对应DOM元素的上方，运行getElementById时页面还没渲染出目标元素，会返回null，后续addEventListener调用会直接报错，功能无法生效。
• 功能逻辑不完整：现有代码仅实现了最小化按钮的点击监听，未绑定最大化按钮的点击事件，也没有在最小化时修改最大化按钮的visibility属性，无法实现完整的切换逻辑。

1. 调整JS执行时机 #

二选一即可：

• 把所有JS代码放到</body>闭合标签的前一行，确保所有DOM元素渲染完成后再执行JS
• 给现有JS代码包裹DOMContentLoaded事件监听，等待DOM加载完成后再执行内部逻辑

2. 补全切换逻辑 #

最小化弹窗时同步显示最大化按钮，点击最大化按钮时恢复弹窗显示、隐藏最大化按钮。

修正后的完整JS代码如下：

document.addEventListener('DOMContentLoaded', function () {
  const calculateMinimize = document.getElementById("calculate-minimize");
  const calculateMaximize = document.getElementById("calculate-maximize");
  const calculateContainer = document.getElementById("calculate-container");

  // 最小化逻辑
  calculateMinimize.addEventListener("click", function () {
    calculateContainer.style.visibility = "hidden";
    calculateMaximize.style.visibility = "visible";
  });

  // 最大化逻辑
  calculateMaximize.addEventListener("click", function () {
    calculateContainer.style.visibility = "visible";
    calculateMaximize.style.visibility = "hidden";
  });
})

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