JavaScript实现网页文本大小增减按钮无响应的问题求助

核心失效原因与对应排查步骤 #

• 脚本加载时机过早，DOM未就绪
  浏览器是从上到下顺序解析代码的，如果JS代码写在按钮、内容区等DOM元素的前面，代码执行到document.getElementById()时，对应的节点还没被解析完成，方法会直接返回null。后续给null绑定点击事件时会直接抛出类型错误，导致整个脚本中断，所有交互都不会生效。
  排查方式：按F12打开浏览器开发者工具，切换到「控制台」面板，如果看到Cannot set properties of null (setting 'onclick')的报错，就是这个问题。解决方法是把操作DOM的JS代码移到所有交互HTML元素的后方，紧贴</body>标签的位置；也可以给script标签加上defer属性，让浏览器等待DOM完全构建完成后再执行JS。
• 元素id匹配不一致
  getElementById对id的大小写、拼写完全敏感，只要和HTML标签里写的id存在一点偏差（比如拼写错字母、多打了空格），就会取不到对应元素，导致事件绑定失效。
  排查方式：在控制台逐行输入document.getElementById("content")、document.getElementById("small")这类查询代码，看返回结果是不是对应的DOM节点，如果返回null就逐字核对HTML上的id拼写。
• 按钮被其他元素遮挡
  如果控制台没有报错，元素也能正常获取到，就检查下按钮上方有没有透明浮层、绝对定位的导航栏等元素，这类遮挡会导致点击事件根本落不到按钮上。排查方式：在开发者工具的「元素」面板选中按钮，查看同位置的层叠元素，调整z-index层级即可解决。

注意：你当前使用的element.onclick = function(){}的事件绑定写法本身没有问题，和更现代的addEventListener实现的交互效果完全等价，不会因为绑定写法本身的问题导致失效，调试时可以优先排查DOM获取的问题，不用反复修改绑定逻辑。

可直接运行的参考实现 #

<!-- 页面结构 -->
<div id="content">
  <p>这里是站点的核心内容区域，会根据点击的按钮同步调整文本大小</p>
</div>
<button id="small" type="button">缩小文本</button>
<button id="normal" type="button">默认文本</button>
<button id="large" type="button">放大文本</button>

<script>
// 获取所有需要操作的DOM节点
const content = document.getElementById("content");
const smallButton = document.getElementById("small");
const normalButton = document.getElementById("normal");
const largeButton = document.getElementById("large");

// 增加存在性判断，避免因元素缺失直接报错中断
if (content && smallButton && normalButton && largeButton) {
  smallButton.onclick = function () {
    content.style.fontSize = "10px";
  }

  normalButton.onclick = function () {
    content.style.fontSize = "14px";
  }

  largeButton.onclick = function () {
    content.style.fontSize = "20px";
  }
}
</script>

可访问性优化提示 #

• 按钮交互时可以同步更新aria-pressed属性，标识当前选中的字号档位，方便屏幕阅读器识别
• 建议调整根节点document.documentElement的fontSize，配合rem单位让全页面元素同步适配大小，比单独给某一个div设置字号的体验更统一

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