javascript - JavaScript 未捕获类型错误:无法读取 null 的属性“样式”:按钮 Onclick 使 html 消失
问题描述
在一个 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 函数放入静态文件之前,我尝试将脚本标签以各种组合方式放在开头或结尾。到目前为止,这里建议的建议为什么jQuery或诸如getElementById之类的DOM方法找不到元素?对我没有帮助。我已经尝试了很多答案中的建议,但我仍然遇到同样的问题。
错误
at HTMLButtonElement.button.onclick (main.js:15)
仍然存在,这是showPage(this.dataset.page);
showPage 函数中的这一行。
我真的坚持这一点。任何意见是极大的赞赏。
解决方案
document.querySelector('#'+page).style.display = 'table-row-group';
用这个