Question

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

＆＃13;

<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>

＆＃13;

所以这段代码确实有效。但是，添加的按钮不会执行任何操作，只需在单击时更改颜色。如何才能使添加按钮运行功能？

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

＆＃13;

<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>

＆＃13;

＆＃13; 当点击第一个按钮时，它会创建大量按钮。

编辑2：我现在就开始工作了。

＆＃13;

<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>

＆＃13;

＆＃13; 感谢大家的帮助！：）

编辑3： ......而另一件事情并不奏效。我将代码更新为：

＆＃13;

<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>

＆＃13;

但是当我点击从原始按钮创建的按钮时，它会创建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功能

e.g

function myFunction() {
 // onclick stuff
}

element.onclick = myFunction; // Assigned

[UPDATE]

让我更容易创造一个小提琴

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

Answer 3

使用addEventListener通过新按钮附加活动。希望这个片段有用

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');
});

＆＃13;

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);
}

＆＃13;

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

＆＃13;

Answer 5

可能需要使用

之类的东西

btn.addEventListener('click',callback_function)

无法向按钮

5 个答案: