为什么这个on.Click事件不起作用

Question

///// FORM  ////
var form = document.getElementById("form");
form.setAttribute("style", "position: relative; margin-bottom: 5%;");

var newButton = document.createElement('button');
var newUl = document.createElement('ul');
var newLi = document.createElement('li');
var newInput = document.createElement('input');
form.appendChild(newButton);
newButton.setAttribute("style", "position: absolute; width: 15%; height: 40px; left: 42%; color: #B00000; background-color: white; font-size: 18px; border: 0px; ");
newButton.innerHTML = "Direct Message";
newButton.onClick = function() {
  alert("works");
};

我的选择有问题吗？ 只希望on.click在newButton创建的元素上起作用。

Answer 1

JavaScript属性名称区分大小写，应为newButton.onclick 。

或者，您可以进入现代时代并使用addEventListener 。

newButton.addEventListener("click", function() {
    alert("works");
});

Answer 2

两件事情：

1. 您需要将按钮的“类型”属性设置为“按钮”；
2. 它是“ onclick”，而不是“ onClick”

第一件事是防止该按钮在单击时提交周围的<form> 。 第二个将正确设置事件处理程序。

Answer 3

该代码不起作用，因为语法不正确。

有关事件“点击”的正确语法如下：

newButton.onclick = function(){
 alert("works");
};

该事件以小写形式写入。