如何使用JavaScript生成带自定义class和onClick事件的HTML按钮

问题原因 #

• 事件属性拼写错误：DOM 原生的点击事件赋值属性是全小写的 onclick，你代码里写的 onClick 大写了 C，不会被浏览器识别为事件绑定，所以点击没有反应。
• 缺少类名配置：你没有给生成的按钮元素添加 btnFormat 类的相关逻辑，所以生成的按钮不带指定类。
• 点击逻辑不完整：事件处理函数里只创建了 a 标签、设置了 href，没有执行 link.click() 触发跳转，且未将 a 标签插入 DOM，部分浏览器中未挂载到 DOM 树的元素调用 click 方法不会生效。

修正后的完整代码 #

<html>
  <head>
    <!-- 此处可替换为你自己的btnFormat样式，以下为示例样式方便测试效果 -->
    <style>
      .btnFormat {
        padding: 6px 12px;
        margin: 0 4px;
        background: #409eff;
        color: #fff;
        border: none;
        border-radius: 4px;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <script>
      var items = [
        {hex: "OBFPUOX6T", alpha: "AYOU1"},
        {hex: "LC7THLODH", alpha: "AYOU2"},
        {hex: "RNPODALAJ", alpha: "AYOU3"},
        {hex: "2FSCQ4LGK", alpha: "AYOU4"},
      ]

      const parentElement = document.querySelector('body');

      items.forEach(function(item) {
        const pButton = document.createElement("button");
        pButton.innerText = item.alpha;
        // 给按钮添加指定类
        pButton.classList.add('btnFormat');
        // 绑定点击事件，使用addEventListener规范度更高，也可替换为pButton.onclick = function() {}写法
        pButton.addEventListener('click', function() {
          var link = document.createElement('a');
          link.href = '#' + item.hex;
          // 将a标签临时插入DOM保证兼容性
          document.body.appendChild(link);
          link.click();
          // 移除临时插入的a标签
          document.body.removeChild(link);
          window.location.reload();
        });
        parentElement.appendChild(pButton);
      })
    </script>
  </body>
</html>

补充说明 #

如果追求代码更简洁，你可以直接修改location.hash实现锚点跳转，不需要额外创建a标签，点击逻辑可以简化为：

pButton.addEventListener('click', function() {
  location.hash = item.hex;
  location.reload();
});

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