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作为一个监听器...

尝试以这种方式思考：您正在告诉有关应该运行的函数的事件，并且事件是定义作为参数传递给函数的事件的事件。在这种情况下，大多数事件都会将事件本身作为第一个参数传递，您需要弄清楚该怎么做。

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

放入JavaScript脚本时onclick不起作用

3 个答案: