无法为按钮添加属性

Question

所以我正在创建一个基于 html 的游戏。我一直在测试，我只是想不出一件事。这是我的代码：

<button onclick="test()">
Click Me!
</button>
<script>
function test(){
var btn = document.createElement("BUTTON")
var name = document.createTextNode("Button")
btn.appendChild(name);
document.body.appendChild(btn);
}
</script>

所以这段代码确实有效。但是，添加的按钮除了在单击时改变颜色之外没有任何作用。我怎样才能使它添加的按钮运行一个功能？

编辑：建议后，我有这个代码：

<button onclick="test()">
Click Me!
</button>
<script>
function test(){
var btn = document.createElement("BUTTON")
var name = document.createTextNode("Button")
btn.appendChild(name);
document.body.appendChild(btn);
btn.onclick = test();
}
</script>

单击第一个按钮时，它会创建大量按钮。

编辑 2： 我现在可以使用它了。

<button onclick="test()">
Click Me!
</button>
<script>
function test(){
var btn = document.createElement("BUTTON")
var name = document.createTextNode("Button")
btn.appendChild(name);
document.body.appendChild(btn);
btn.onclick = function(){
var btn = document.createElement("BUTTON")
var name = document.createTextNode("Button")
btn.appendChild(name);
document.body.appendChild(btn);
}
}
</script>

感谢大家的帮助！ :)

编辑 3： ...还有一件事不起作用。我将代码更新为：

<button onclick="test()">
Click Me!
</button>
<script>
function test(){
var btn = document.createElement("BUTTON")
var name = document.createTextNode("Click Me!")
btn.appendChild(name);
document.body.appendChild(btn);
btn.onclick = function(){
var btn = document.createElement("BUTTON")
var name = document.createTextNode("Click Me!")
btn.appendChild(name);
document.body.appendChild(btn);
btn.onclick = test()
}
}
</script>

但是当我单击从原始按钮创建的按钮时，它会创建 2 而不是只有 1，这正是我想要的。此外，两者中的第一个什么都不做。我该如何解决这个问题？

Answer 1

我相信您的困惑是由于您动态添加元素（在本例中为按钮）然后想要访问所述元素（按钮）。

命名这些新元素的最简单方法是首先指定创建它们的语句，

document.createElement("BUTTON");

到一个变量，你确实做了！

btn = document.createElement("BUTTON");

因此，请记住，您可以使用您创建的变量做一些事情，例如给它一个类或 ID 名称以供访问。

btn.setAttribute('class', 'btn-class');

现在，您可以使用类名称 btn-class 或您可能希望选择的任何其他名称从 CSS 中指定任何样式元素。

这是一个 JSFiddle，它显示：https://jsfiddle.net/dg1amubr/4/

Answer 2

为按钮添加onclick函数

例如

function myFunction() {
 // onclick stuff
}

element.onclick = myFunction; // Assigned

[更新]

为了更容易，我创建了一个小提琴

https://jsfiddle.net/33h3bgxc/1/

Answer 3

使用addEventListener 附加带有新按钮的事件。希望这个sn-p有用

function test(){
var btn = document.createElement("BUTTON");
var name = document.createTextNode("Button");
btn.id = "newButton"
btn.appendChild(name);
document.body.appendChild(btn);
var _getNewButton = document.getElementById('newButton');
_getNewButton.addEventListener('click',function(){
alert('New Button');
})
}
// You can also directly attach addEventListener without going via id.
// btn.addEventListener('click',function(){ ..})

Working Example

Answer 4

您需要为该按钮分配一个事件处理程序。

btn.addEventListener('click', function(event) { 
   console.log('I was clicked');
});

function test() {
  var btn = document.createElement("BUTTON")
  var name = document.createTextNode("Button")
  btn.appendChild(name);
  btn.addEventListener('click', function(event) {
    alert('I was clicked');
  });
  document.body.appendChild(btn);
}

<button onclick="test()">
  Click Me!
</button>

Answer 5

可能你需要使用类似的东西

btn.addEventListener('click',callback_function)

?