两个JavaScript函数冲突致页面消失的问题解决求助

你完全猜对了问题根源！你的代码给页面上所有<button>元素都绑定了showPage点击事件，包括那些Add按钮。当你点击Add按钮时，它没有data-page属性，所以this.dataset.page返回的是undefined，这时候调用showPage(undefined)会导致两个问题：

1. document.querySelector(#${page})会变成document.querySelector('#undefined')，找不到对应的tbody元素，所以抛出Uncaught TypeError: Cannot read property 'style' of null错误
2. 错误会中断代码执行，导致页面出现异常（比如你看到的页面消失）

下面是两种简单的解决方案，从根源上避免冲突：

方案1：给分页按钮添加专属类，只绑定目标按钮 #

这是最直观的方法，给负责切换页面的按钮加一个专属类，比如page-toggle-btn，然后只给这类按钮绑定showPage事件：

第一步：修改分页按钮的HTML #

<!-- 给分页按钮添加page-toggle-btn类 -->
<button class="posbutton page-toggle-btn" data-page="page1">QB</button>

第二步：修改事件绑定的JavaScript代码 #

document.addEventListener('DOMContentLoaded', function() {
  // 只选择带有page-toggle-btn类的按钮
  document.querySelectorAll('button.page-toggle-btn').forEach(button => {
    button.onclick = function() {
      showPage(this.dataset.page);
    };
  });
});

这样Add按钮没有这个类，就不会被绑定showPage事件，冲突直接解决。

方案2：给showPage函数添加容错处理（可选，增强代码健壮性） #

即使以后不小心有其他按钮触发了showPage，也不会报错，可以给函数加个简单的判断：

function showPage(page) {
  // 如果page为空或无效，直接返回
  if (!page) return;
  
  document.querySelectorAll('tbody').forEach(tbody => {
    tbody.style.display = 'none';
  });
  
  const targetTbody = document.querySelector(`#${page}`);
  // 确认找到目标tbody后再修改样式
  if (targetTbody) {
    targetTbody.style.display = 'table-row-group';
  }
}

为什么之前的代码会出问题？ #

document.querySelectorAll('button')会选中页面上所有<button>元素，包括你的Add按钮。而Add按钮没有data-page属性，所以this.dataset.page是undefined，传入showPage后，querySelector找不到#undefined这个元素，就会抛出TypeError，进而影响页面的正常显示。

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