Django项目中JS点击按钮报错致页面消失问题求助

核心问题原因 #

你遇到的问题根源在于所有按钮都被绑定了showPage的点击事件，包括触发myFunction的"Add"按钮。当点击Add按钮时，它没有data-page属性，this.dataset.page会返回undefined；传递给showPage后，document.querySelector(#${page})就会去查找#undefined这个不存在的元素，直接抛出Cannot read property 'style' of null错误；同时前面的代码已经把所有tbody设为display: none，所以整个页面就会消失。

具体修复步骤 #

1. 给页面切换按钮添加专属类名
   修改触发showPage的按钮，给它们加一个特定类（比如page-toggle-btn），和Add按钮做区分：

   <button class="posbutton page-toggle-btn" data-page="page1">QB</button>
   

2. 修改事件绑定的选择器范围
   在DOMContentLoaded的事件处理逻辑里，只选择带有page-toggle-btn类的按钮绑定showPage，不再给所有按钮绑定：

   document.addEventListener('DOMContentLoaded', function() {
     // 仅选择页面切换按钮，而非全局所有button
     document.querySelectorAll('.page-toggle-btn').forEach(button => {
       button.onclick = function() {
         showPage(this.dataset.page);
       };
     });
   });
   

3. 给showPage增加容错判断（可选但推荐）
   为了避免类似的"元素找不到"报错，可以在showPage里先检查目标元素是否存在：

   function showPage(page) {
     // 隐藏所有tbody
     document.querySelectorAll('tbody').forEach(tbody => {
       tbody.style.display = 'none';
     });
     // 检查目标页面元素是否存在
     const targetTbody = document.querySelector(`#${page}`);
     if (targetTbody) {
       targetTbody.style.display = 'table-row-group';
     } else {
       console.warn(`无法找到ID为${page}的tbody元素`);
     }
   }
   

完成以上修改后，点击Add按钮只会触发myFunction提交文本，不会再触发showPage，页面就不会消失，也不会出现报错了。

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