放入 JavaScript 脚本时 onclick 不起作用

Question

For the sake of simplicity:

In 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));

In HTML (Works great):

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

I know that in JavaScript, element.onclick = should be functionName, not functionCall(); but what's the solution for a function with parameters, do I have to use HTML onclick in this case? I really want to put onclick in script though.

Answer 1

because

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

You are looking for an id of idName because of the quotes makes it a string and not a reference to your variable.

Your console should have error message in it saying something like Cannot read property 'onclick' of null(…)

Answer 2

Remove the single quotes in this line.

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

So use this instead.

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

The reason is that you want the variable idName to be passed to getElementsById, not the string 'idName'

Answer 3

It doesn't work because you are not attaching proper functions as your listeners

//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; }

The one isn't even valid. You can't define 1 and 2 as argument names. And the onclick must be set to a function that optionally accepts an event. So instead you should:

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

For your second one

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

That one doesn't work because you are actually evaluating f2 with the variables v1 and v2, which returns undefined. So you are tring to attach undefined as a listener...

Try to think of it this way: you are telling an event about a function that should be run, and the event is the one that defines what gets passed to the function as an argument. In this case, most events will pass the event itself as the first argument and you need to figure out what to do from there.

If you want to get crazy and not repeat code you should look into creating a function that returns a function (so meta)