JavaScript 未捕获类型错误:无法读取 null 的属性“样式”:按钮 Onclick 使 html 消失

Posted

技术标签:

【中文标题】JavaScript 未捕获类型错误:无法读取 null 的属性“样式”:按钮 Onclick 使 html 消失【英文标题】:JavaScript Uncaught TypeError: Cannot read property 'style' of null: Button Onclick makes html disappear 【发布时间】:2021-03-29 17:54:23 【问题描述】:

在一个 django 项目中,我设置了一个 javascript 函数来选择/阻止某些页面。对于正在加载的页面,我有另一个 JavaScript 函数。此函数有一个 onclick 事件侦听器,可将文本提交到表单字段。我遇到的问题是,当我单击按钮将文本添加到表单字段时,整个页面都会消失。这两个函数都在一个名为“main.js”的静态文件中。控制台中显示的确切错误消息是......

Uncaught TypeError: Cannot read property 'style' of null
    at showPage (players:6382)
    at htmlButtonElement.button.onclick (players:6388)

这是控制单个页面的显示/阻止的功能。

 function showPage(page) 
        document.querySelectorAll('tbody').forEach(tbody => tbody.style.display = 'none';)

        document.querySelector(`#$page`).style.display = 'table-row-group'; ---(This line in error message)
    

    document.addEventListener('DOMContentLoaded', function() 
        document.querySelectorAll('button').forEach(button => 
            button.onclick = function() 
                showPage(this.dataset.page); ---(This line in error message)
                       
        );
    );

以下是此函数所针对的按钮的 html 模板示例。

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

这是向表单域提交文本的函数。

function myFunction(txt) 
          var myTxt = txt;
      
          
          if (txt.includes('QB')) 
              document.getElementById("QB_name").value = myTxt;
          

          else if (txt.includes('RB')) 
              document.getElementById("RB_name").value = myTxt;
          

          else if (txt.includes('WR')) 
              document.getElementById("WR_name").value = myTxt;
          

          else if (txt.includes('TE')) 
              document.getElementById("TE_name").value = myTxt;
          

          else if (txt.includes('K')) 
              document.getElementById("K_name").value = myTxt;
          
          
      

以下是 showPage 函数所针对的 html 元素的示例。它还包含一行与链接到 myFunction 以提交文本的按钮。

<tbody id="page1">
               
         % for q in QBpage %
              <tr>
                <th scope="row">
                      
                </th>
                    
                <td><h6> q.player_name </h6></td>
                <td><input type="button"  class="btn btn-outline-primary btn-sm m-0 waves-effect" onclick="myFunction(' player_data.player_name   player_data.position ')">Add</input></td>
                <td><h6>  q.team  </h6></td>
                <td><h6>  q.position   </h6></td>
                <td><h6> q.points </h6></td>
                </tr>
                  
         % endfor %
</tbody>

在将两个 JavaScript 函数放入静态文件之前,我尝试将脚本标签以各种组合方式放在开头或结尾。到目前为止,这里建议的建议Why does jQuery or a DOM method such as getElementById not find the element? 对我没有帮助。我已经尝试了很多答案中的建议,但我仍然遇到同样的问题。

错误 at HTMLButtonElement.button.onclick (main.js:15) 仍然存在,即 showPage 函数中的 showPage(this.dataset.page);this 行。

我真的坚持这一点。非常感谢任何建议。

【问题讨论】:

【参考方案1】:
document.querySelector('#'+page).style.display = 'table-row-group';

使用这个

【讨论】:

以上是关于JavaScript 未捕获类型错误:无法读取 null 的属性“样式”:按钮 Onclick 使 html 消失的主要内容,如果未能解决你的问题,请参考以下文章

JavaScript 未捕获类型错误:无法读取 null 的属性“样式”:按钮 Onclick 使 html 消失

我该如何解决这个问题:未捕获的类型错误:无法读取 javascript 中未定义的属性“toString”

未捕获的类型错误:无法读取 null 的属性“样式”。在同一页面中使用两个 Javascript 函数

未捕获的类型错误:无法读取未定义的属性 toLowerCase

未捕获的类型错误:无法读取未定义的属性“值”

未捕获的类型错误:无法读取未定义的属性“说话”?