我想使用 createElement 生成许多按钮，但我无法让按钮在单击时执行不同的操作。在这个例子中，我想要一个按钮让控制台显示为“punch 10”，一个按钮让控制台显示为“kick 20”。
<html>
<head>
<title></title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<button onclick="printBtn();">Go Joe!</button>
<script src="index.js"></script>
</body>
</html>
var joe = {
age: 20,
moves: [
{name: "punch", power: 10,},
{name: "kick", power: 20,},
]
}
function printBtn() {
for (var i = 0; i < joe.moves.length; i++) {
let btn = document.createElement("button");
var n = document.createTextNode(joe.moves[i].name);
var t = document.createTextNode(joe.moves[i].power);
var nr = joe.moves[i].name
var tr = joe.moves[i].power
var linebreak = document.createElement("br")
btn.appendChild(n);
btn.appendChild(linebreak);
btn.appendChild(t);
document.body.appendChild(btn);
btn.style.width = "125px"
btn.style.height = "50px"
btn.style.fontSize = "12px"
btn.innerHTML.onclick = function readOut() {console.log(nr + " " + tr)}
}
}
我尝试使用 innerHTML 为每个按钮分配一个函数，其中包含我认为每个按钮都会不同的变量，以使 console.log 方法根据单击哪个按钮说“punch 10”或“kick 20” .然而，随着变量的变化，结果也会发生变化，这导致我的 console.log 方法总是导致“kick 20”。
我只想在 html 中制作您需要的按钮，并在这些按钮上赋予 css“可见性：隐藏”，并使用 printBtn 函数使这些样式通过 document.getElementById("btn").style.visibility = visable 可见。
我会对此发表评论，但我还不能。