JS点击切换Div功能异常 内容追加而非切换显隐问题排查

你猜测的result容器未清空不是问题诱因，现有fetch逻辑在请求发起前、回调执行后都做了result.innerHTML = ""清空操作，容器清空逻辑是生效的。实际问题来自4个代码错误：

• 切换逻辑完全失效：一是判断逻辑颠倒，初始状态为表格隐藏、图表显示，你写的if分支判断表格隐藏时反而继续保持图表显示；二是语法错误，else分支中displayGraph.style.display === "none"是全等比较语句不是赋值操作，隐藏图表的代码从未执行；三是读取状态逻辑错误，element.style.display只能读取元素内联样式，初始CSS类设置的display: none不会同步到内联属性上，第一次点击时读取到的displayTable.style.display是空字符串，直接进入else分支后仅设置表格显示、未隐藏图表，自然出现两个元素同时展示、表格追加在图表下方的现象。
• 事件重复绑定：每次formatData被调用（比如多次触发fetch请求），都会给切换按钮重复绑定click事件，触发次数累计后，点击一次会执行N次切换逻辑，状态完全混乱。
• DOM查询范围错误：切换逻辑用全局document.querySelector查找元素，若页面存在残留的同class旧节点，会操作到错误的DOM，而非当前新渲染的表格/图表容器。
• 变量名笔误：获取按钮时定义的变量是displayButton，绑定事件时却用了未定义的display，会直接抛出JS错误阻断执行。

1. 修正基础语法与逻辑错误 #

将事件绑定和渲染逻辑解耦，避免重复绑定，限定DOM查询范围，修正判断与赋值逻辑。

// 提前全局绑定一次切换按钮事件，不要在渲染函数内重复绑定
let currentContainer = null; // 缓存当前渲染的容器节点
const displayBtn = document.getElementById("display");
// 绑定前先移除旧监听，避免重复触发
displayBtn.removeEventListener("click", toggleDisplayHandler);
displayBtn.addEventListener("click", toggleDisplayHandler);

function toggleDisplayHandler() {
    if (!currentContainer) return;
    // 仅在当前渲染的容器范围内查找元素，避免全局查询命中旧DOM
    const tableEl = currentContainer.querySelector(".displayTable");
    const graphEl = currentContainer.querySelector(".displayGraph");
    // 读取实际渲染的样式判断状态，不依赖不可靠的内联style
    const isTableHidden = window.getComputedStyle(tableEl).display === "none";
    
    if (isTableHidden) {
        // 切换到表格视图
        tableEl.style.display = "block";
        graphEl.style.display = "none";
    } else {
        // 切换到图表视图
        tableEl.style.display = "none";
        graphEl.style.display = "block";
    }
}

const formatData = (response) => {
    const containerDiv = document.createElement("div");
    const mainDiv = document.createElement("div");
    
    const div1= document.createElement("div");
    div1.classList.add("displayTable");
    div1.appendChild(formatTable(response));
    mainDiv.appendChild(div1)

    const div2 = document.createElement("div");
    div2.classList.add("displayGraph");
    div2.appendChild(formatGraph(response));
    mainDiv.appendChild(div2)
    containerDiv.append(mainDiv);

    // 更新缓存的容器为最新渲染节点
    currentContainer = containerDiv;
    return containerDiv;
};

更易维护的写法：可以抽离通用显隐类，通过class增删控制显隐，不要直接修改内联样式

.hidden {
    display: none !important;
}

切换逻辑替换为class操作即可：

if (isTableHidden) {
    tableEl.classList.remove("hidden");
    graphEl.classList.add("hidden");
} else {
    tableEl.classList.add("hidden");
    graphEl.classList.remove("hidden");
}

2. 修正fetch函数的语法错误 #

原fetch函数存在形参写法错误、遍历变量未定义问题，修正后如下：

// 形参位置传入url变量，不要直接写死url字符串
function dataFetch(url) {
  const result = document.getElementById("result");
  result.innerHTML = "";

  const request = {
    method: "GET",
  };

  fetch(url, request)
   .then(response => response.json())
   .then((items) => {
      result.innerHTML = "";
      if (Array.isArray(items)) {
        if (url.indexOf("report") >= 0) {
          result.append(formatData(items));
        } else {
          // 遍历返回的items数组，不要用未定义的data变量
          items.forEach((item) => {
            result.append(formatReport(item));
          });
        }
      } 
    })
   .catch(console.error);
}

• 事件绑定与渲染逻辑解耦：页面持久存在的固定元素（比如不随渲染销毁的切换按钮）只在全局绑定一次事件；动态生成元素的事件，要在元素被移除前主动解绑，避免内存泄漏和重复触发。
• 缩小DOM查询范围：操作动态渲染的内容时，从当前渲染的根容器向下查找元素，不要直接用全局document.querySelector，避免命中历史残留的同标识节点。
• 状态与DOM分离：显隐、选中这类交互状态不要完全依赖DOM属性判断，建议用单独变量存储状态，减少DOM读取带来的不可靠问题。
• 动态内容清空要彻底：用innerHTML = ""清空容器时，注意提前解绑旧DOM上挂载的事件，避免内存泄漏。

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