Question

嘿，我想创建一个这样的按钮：

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<input type="button" value="click-me" id="myButton" onclick="myFunction()">
</body>
</html>

但是我想从javascript创建，而我正在做一些非常错误的事情因为我的按钮似乎不是

var MyButton = document.createElement("BUTTON");
MyButton.id = "Mybuttonid";
MyButton.className = "MyButtonclass";
MyButton.onclick("myFunction()");
Div.appendChild(MyButton); //i have others things working in this "Div" only this button doesn't appear

Answer 1

您在发布的代码中滥用了onclick，如果您检查控制台，则会发现以下消息：

“未捕获的TypeError：MyButton.onclick不是函数”

要使用onclick附加点击事件，应该是：

MyButton.onclick = myFunction;

否则最好使用addEventListener()来附加事件，例如：

MyButton.addEventListener("click", myFunction);

希望这会有所帮助。

var Div = document.getElementById("my_div");


var MyButton = document.createElement("BUTTON");
MyButton.id = "Mybuttonid";
MyButton.className = "MyButtonclass";
MyButton.addEventListener("click", myFunction);
Div.appendChild(MyButton);

function myFunction(){
  alert('test');
}

<div id="my_div"></div>

Answer 2

你做错了因为Button不存在（但MyButton存在）。而不是：

var MyButton = document.createElement("BUTTON");
MyButton.id = "Mybuttonid";
MyButton.className = "MyButtonclass";
MyButton.onclick("myFunction()");
Div.appendChild(MyButton);

Answer 3

使用addEventListener向按钮添加点击事件;并将Div.appendChild(button);更改为Div.appendChild(MyButton);

function myFunction(){
  alert("here");
}

var Div = document.getElementById('div');

var MyButton = document.createElement("button");
MyButton.id = "Mybuttonid";
MyButton.innerHTML ="CLICK ME"
MyButton.className = "MyButtonclass";
MyButton.addEventListener("click", myFunction, false);
 
Div.appendChild(MyButton); //i have others think working in this "Div" only this button doesn't appear

<div id="div">
</div>

Answer 4

在HTML和Javascript中，您正在以错误的方式声明您的onclick功能。而不是

<input type="button" value="click-me" id="myButton" onclick"myFunction()">

应该是

<input type="button" value="click-me" id="myButton" onclick="myFunction()">

这意味着Javascript中的这段代码在这里：

MyButton.onclick("myFunction()");

应该是

   MyButton.onclick = function(){ myFunction() };

通过这样做并解决其他用户提到的拼写错误，它应该可以正常工作。

在Javascript

4 个答案: