Javascript生成HTML按钮与onClick自定义函数

我有一个有javascript的HTML页面，我想让javascript生成这样的HTML按钮:

<button class="btnFormat" onclick="var link = document.createElement('a');
link.href = '#xxxxx';
link.click(); window.location.reload() "> AYOU1 </button>
<button class="btnFormat" onclick="var link = document.createElement('a');
link.href = '#xxxxx';
link.click(); window.location.reload() "> AYOU1 </button>
<button class="btnFormat" onclick="var link = document.createElement('a');
link.href = '#xxxxx';
link.click(); window.location.reload() "> AYOU1 </button>

我似乎不知道如何让javascript添加类或onClick '字符串'。我的代码运行没有错误，但看看输出，它只是:

<button>AYOU1</button>
<button>AYOU2</button>
<button>AYOU3</button>

这是我一直在工作的代码(它没有class=，因为我不能弄清楚onClick=部分…):

<html>
<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.querySelector('body'); // DOM location when buttons will be added
items.forEach(function(item) {
const pButton = document.createElement("button");
pButton.innerText = item.alpha;
pButton.onClick = function() {
var link = document.createElement('a');
link.href = '#' + item.hex;
window.location.reload();
};
i++;
console.log(pButton, i)
parentElement.appendChild(pButton); // to add new element to DOM
})
</script>
</body>
</html>

我将感激任何帮助!提前感谢!

我在这里添加了完整的源代码:https://jsfiddle.net/kilimar/7eL15azm/

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

虽然，你的脚本有一些错误，可以简化:

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>

我希望这对你有帮助!

相关内容

最新更新

热门标签：