Question

我正在使用JavaScript动态创建一个按钮，同时分配“ID”，“类型”等属性以及“onclick”以触发功能。

除了'onclick'的分配外，一切正常。单击时，该按钮不会按预期触发该功能。我正在尝试运行的功能是'导航（-1）'，如下所示。

我哪里错了？

这是我的代码：

function loadNavigation() {
var backButton;
backButton = document.createElement('input');
backButton.ID = 'backButton';
backButton.type = 'button';
backButton.value='Back';
backButton.onclick = 'navigate(-1)';
document.body.appendChild(backButton);
}

Answer 1

正如对方所说，你应该分配一个功能。

只是想指出在这种情况下你想传递一个值，所以你需要分配一个匿名函数（或内联定义的命名函数），如

button.onclick = function() {otherfunction(parameter)};

如果您要分配的功能不需要参数，您可以直接使用

button.onclick = otherfunction;

请注意，在这种情况下没有括号

button.onclick = otherfunction(); // this doesn't work

将无效，因为它会在解析后立即调用otherfunction

Answer 2

您正在为onclick分配文本，请尝试分配功能。

backButton.onclick = function(){navigate(-1);};

Answer 3

你必须分配一个函数，而不是一个字符串。

backButton.onclick = function wastefulDuplicationOfBackButton () {
    navigate(-1);
}

Answer 4

使用函数而不是字符串。例如，

backButton.onclick = function () { navigate(-1); };

Answer 5

您应该分配一个函数，而不是字符串：

//...
backButton.onclick = function () {
  navigate(-1);
};
//...

Answer 6

backButton.onclick = function() { navigate(-1); }

Answer 7

如果此问题是重复的，这是在当前浏览器中的解决方法

ES6

backButton.addEventListener("click",() => history.back());

比onclick旧但新

backButton.addEventListener("click",function() { history.back() });

如何动态分配JavaScript“onclick”属性？

7 个答案: