放入 JavaScript 脚本时 onclick 不起作用

Question

为了简单起见：

在 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 。

Answer 1

因为

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

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

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

Answer 2

删除此行中的单引号。

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

所以改用这个。

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

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

Answer 3

它不起作用，因为您没有附加适当的功能作为您的听众

//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，这将返回 undefined。 所以你试图将 undefined 附加为侦听器......

试着这样想：你正在告诉一个关于应该运行的函数的事件，而事件定义了作为参数传递给函数的内容。 在这种情况下，大多数事件会将事件本身作为第一个参数传递，您需要从那里弄清楚要做什么。

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