onclick'放在JavaScript脚本中时无法工作

onclick doesn't work when put in JavaScript script

本文关键字：工作 脚本 JavaScript 放在 onclick      更新时间：2023-09-26

为了简单起见：

在JavaScript中：

function f1(idName) {
    return document.getElementById(idName);
}
function f2(v1,v2) {
    f1('one').innerHTML = v1 + v2;
}
//this doesn't work
f1('one').onclick = function() {
    f2(1,2);
};
//this doesn't work, even if this one works I wouldn't use it, since I don't want to write the same function multiple times
f1('one').onclick = function f2(1,2) {
    return f1('one').innerHTML = v1 + v2;
}
//this doesn't work
f1('one').addEventListener('click', f2(v1, v2));

在HTML中（效果很好）：

<a ... onclick="f2(1, 2)"></a>
<p id="one"><!--output 3--></p>

我知道在JavaScript中，element.onclick=应该是functionName，而不是functionCall（）；但是对于带参数的函数，解决方案是什么？在这种情况下，我必须使用HTML onclick吗不过我真的很想把onclick放在剧本里。

因为

return document.getElementById('idName');  <---

您正在寻找idName的id，因为引号使其成为字符串，而不是对变量的引用。

您的控制台中应该有一条错误消息，上面写着类似Cannot read property 'onclick' of null(…) 的内容

它不起作用，因为您没有将适当的函数附加为侦听器

//this doesn't work, even if this one works I wouldn't use it, since I don't want to write the same function multiple times
f1('one').onclick = function f2(1,2) { return f1('one').innerHTML = v1 + v2; }

这个甚至都无效。不能将1和2定义为参数名称。onclick必须设置为一个可以选择性地接受事件的函数。所以你应该：

f1('one').onclick = function(ev){ f2(1,2); }

对于您的第二个

// this doesn't work
f1('one').addEventListener('click', f2(v1, v2));

这个方法不起作用，因为您实际上是在用变量v1和v2计算f2，它返回未定义的值。因此，您正在字符串中附加未定义的侦听器。。。

试着这样想：你告诉一个事件应该运行的函数，而这个事件定义了传递给函数的参数。在这种情况下，大多数事件都会将事件本身作为第一个参数传递，您需要从中找出要做什么。

如果你想变得疯狂而不重复代码，你应该考虑创建一个返回函数（所以元）的函数

删除此行中的单引号。

function f1(idName) {return document.getElementById('idName');}

所以用这个来代替。

function f1(idName) {return document.getElementById(idName);}

原因是您希望将变量idName传递给getElementsById，而不是字符串"idName"

相关文章：