无法向按钮添加属性

Cant add attributes to buttons

本文关键字：添加 属性 按钮      更新时间：2024-05-11

所以我正在创建一个基于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，这正是我想要的。此外，两者中的第一个没有任何作用。我该怎么解决这个问题？

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

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

document.createElement("BUTTON");

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

btn = document.createElement("BUTTON");

因此，请记住，您可以对创建的变量执行一些操作，比如给它一个类或ID名称以供访问。

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

现在，您可以从CSS中为任何样式元素分配类名为btn-class或任何其他您想要选择的元素。

以下是一个JSFiddle，它表明：https://jsfiddle.net/dg1amubr/4/

为按钮添加onclick函数

例如

function myFunction() {
 // onclick stuff
}
element.onclick = myFunction; // Assigned

[更新]

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

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

使用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(){ ..})

工作示例

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

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>

可能需要使用类似的东西

btn.addEventListener('click',callback_function)

相关文章：