Materialize CSS按钮激活异常：点击按钮无法启用禁用按钮求助

我帮你排查了几个导致按钮无法激活的核心问题，咱们一步步来解决：

1. HTML标签嵌套语法错误（最容易忽略的坑） #

你把<a class="btn disabled" id="btnn">Skip Ad</a>嵌套在另一个<a>标签里了，这是无效的HTML语法（a标签不能嵌套a标签），浏览器会自动修正这个错误，可能导致btnn元素的DOM结构异常，JS无法正确选中它。

修正后的HTML片段：

<div align="middle" hspace="30">
  <font size="4">Click </font>
  <a class="btn disabled" id="btnn">Skip Ad</a>
  <font size="4"> to skip the ad and play the video.</font>
</div>

2. JS代码加载时机错误 #

你的file.js在<head>里引入，此时页面的DOM元素还没完全渲染，document.getElementById("btn")会返回null，事件绑定根本没生效。

解决方法二选一：

• 把<script type="text/javascript" src="js/file.js"></script>移到</body>标签的最末尾（在materialize.min.js之后）
• 或者给JS代码包裹DOM加载监听：

document.addEventListener('DOMContentLoaded', function() {
  // 所有JS逻辑写在这里
})

3. classList.replace用法错误 #

classList.replace(oldClass, newClass)是用来替换单个CSS类的，不能直接传入多个类的字符串。Materialize的禁用按钮只需要移除disabled类就可以激活，不需要替换整个类列表。

修正后的完整JS代码：

document.addEventListener('DOMContentLoaded', function() {
  const triggerBtn = document.getElementById("btn");
  const skipBtn = document.getElementById("btnn");

  triggerBtn.addEventListener("click", function() {
    // 移除disabled类，按钮自动变为激活状态
    skipBtn.classList.remove("disabled");
    // 可选：确保波纹效果类存在（初始若已有btn类可省略）
    skipBtn.classList.add("waves-effect", "waves-light");
  });
})

最终修正要点总结 #

• 修复a标签嵌套的HTML语法错误
• 确保JS代码在DOM加载完成后执行
• 使用classList.remove("disabled")来激活按钮（这是Materialize控制按钮禁用状态的正确方式）

这样修改后，点击button按钮就能正常激活Skip Ad按钮了。

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