Javascript 生成带有 onClick 自定义功能的 HTML 按钮

Question

Answer 1

如果您的输出不显示任何类，那是因为所有事件都是在后台处理的，这样做也可能是一个很好的做法。

不过，您的脚本有一些错误，可以简化：

pButton.onclick

是小写（不是

pButton.onClick

）

pButton.onclick = function() { // [...]

然后还有一个非常有用的属性：
```
location.hash
```
（而且
```
window
```
也不是必须的）
```
location.hash = '#' + item.hex;
location.reload();
```

（奖励！）有一个

document.querySelector('body')

的快捷方式

const parentElement = document.body

无论如何，这是完整的代码：

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <script>
      var items = [
        {hex: "OBFPUOX6T", alpha: "AYOU1"},
        {hex: "LC7THLODH", alpha: "AYOU2"},
        {hex: "RNPODALAJ", alpha: "AYOU3"},
        {hex: "2FSCQ4LGK", alpha: "AYOU4"},
      ]

      var i = 0;
      const parentElement = document.body; // DOM location when buttons will be added

      items.forEach(function(item) {
        const pButton = document.createElement("button");
        pButton.innerText = item.alpha;
        pButton.onclick = function() {
          location.hash = '#' + item.hex;
          location.reload();
        };
        i++;
        console.log(pButton, i)
        parentElement.appendChild(pButton); // to add new element to DOM
      })
    </script>
  </body>
</html>

我希望这有帮助！

Answer 2

0
投票

我们在哪里插入按钮的功能？

Javascript 生成带有 onClick 自定义功能的 HTML 按钮

问题描述投票：0回答：2

2个回答

最新问题

Javascript 生成带有 onClick 自定义功能的 HTML 按钮

问题描述 投票：0回答：2

2个回答

最新问题

问题描述投票：0回答：2