JS 分页在浏览器出现报错信息

Question

以下是 JS 分页的代码，在使用浏览器检测功能，发现出现错误信息，请问是什么问题导致的?

Chrome浏览器:
Uncaught TypeError: Cannot read properties of null (reading 'style')
at webyesnonelink (test.htm:181:33)
at HTMLSpanElement.onclick (test.htm:190:82)

Firefox浏览器:
Uncaught TypeError: can't access property "style", document.getElementById() is null
webyesnonelink /test.htm:181
onclick /test.htm:1

代码:

<script type="text/javascript">
  function webyesnonelink(num){
  for(var id = 1;id<=7;id++)
  {
  var MrJin="webyesnone_ids"+id;
  if(id==num)
  document.getElementById(MrJin).style.display="block";
  else
  document.getElementById(MrJin).style.display="none";
  }
  if(num==7) 
  document.getElementById("webyesnonetitle").className="";
  }
</script>
<div id="webyesnonetitle" style="margin: 5px 0 15px 0;">
<span class="taggln1 tagglld1" onClick="javascript:webyesnonelink(1)">文字01-分页</span>
<span class="taggln2 tagglld2" onClick="javascript:webyesnonelink(2)">图片02-分页</span>
<span class="taggln3 tagglld3" onClick="javascript:webyesnonelink(3)">音乐03-分页</span>
</div>
<div id="webyesnone_ids1" style="display: block;">
文字文字文字文字!
</div>
<div id="webyesnone_ids2" style="display: none;">
图片图片图片图片!
</div>
<div id="webyesnone_ids3" style="display: none;">
音乐音乐音乐音乐!
</div>

Answer 1

晚上好🌙🌙🌙
本答案参考通义千问

你提供的 JavaScript 代码在执行时出现了 TypeError，主要原因是尝试访问一个 null 对象的 style 属性。这表明你在调用 document.getElementById() 时，所查找的元素不存在。

---

🚨 问题分析

报错信息解读：

• Chrome: Uncaught TypeError: Cannot read properties of null (reading 'style') at webyesnonelink (test.htm:181:33)
• Firefox: Uncaught TypeError: can't access property "style", document.getElementById() is null

这些错误都指向了同一问题：document.getElementById(MrJin) 返回了 null，说明该 ID 的元素在 HTML 中不存在。

---

🔍 问题原因

你的 JavaScript 函数中使用了如下代码：

var MrJin = "webyesnone_ids" + id;
if (id == num)
    document.getElementById(MrJin).style.display = "block";
else
    document.getElementById(MrJin).style.display = "none";

但你只定义了三个元素：

• webyesnone_ids1
• webyesnone_ids2
• webyesnone_ids3

而循环中 id 是从 1 到 7，因此当 id > 3 时，document.getElementById("webyesnone_ids4")、5、6、7 都是 null，导致报错。

---

✅ 解决方案

1. 限制循环范围到实际存在的 ID

你只需要处理 id 为 1 到 3 的情况，而不是 1 到 7。

修改后的代码：

function webyesnonelink(num) {
  for (var id = 1; id <= 3; id++) { // 仅循环到 3
    var MrJin = "webyesnone_ids" + id;
    if (id == num)
      document.getElementById(MrJin).style.display = "block";
    else
      document.getElementById(MrJin).style.display = "none";
  }
  if (num == 7) 
    document.getElementById("webyesnonetitle").className = "";
}

---

2. 添加对 null 的判断（推荐）

为了更健壮，可以加入判断语句，避免直接访问 null 的属性。

修改后的代码（推荐）：

function webyesnonelink(num) {
  for (var id = 1; id <= 7; id++) {
    var MrJin = "webyesnone_ids" + id;
    var element = document.getElementById(MrJin);
    if (element) { // 检查元素是否存在
      if (id == num)
        element.style.display = "block";
      else
        element.style.display = "none";
    }
  }
  if (num == 7) 
    document.getElementById("webyesnonetitle").className = "";
}

---

3. 确保 HTML 中有对应 ID 的元素

如果你确实需要支持 id=4 到 7，请在 HTML 中添加对应的元素，例如：

<div id="webyesnone_ids4" style="display: none;">内容4</div>
<div id="webyesnone_ids5" style="display: none;">内容5</div>
<div id="webyesnone_ids6" style="display: none;">内容6</div>
<div id="webyesnone_ids7" style="display: none;">内容7</div>

---

✅ 总结

| 问题 | 原因 | 解决方案 | |------|------|----------| | TypeError: Cannot read properties of null | 调用了不存在的 ID 元素 | 限制循环范围或检查元素是否为 null | | 不正确的分页逻辑 | 循环到 id=7，但只有 id=1~3 有元素 | 只循环到实际存在的 ID 数量 |

---

📌 最终建议

• 如果你只需要显示 3 个分页项，那么将 for 循环改为 id <= 3。
• 如果你需要支持更多分页项，请在 HTML 中添加对应 ID 的元素。
• 在访问 DOM 元素前，建议先进行 null 判断，提高程序的健壮性。

如需进一步优化分页逻辑或实现动态分页，也可以告诉我，我可以提供更高级的实现方式。