Noob javascript, why is this firing onload?

Question

So I dont understand why the console logs 1 right away onload or something when i have one.onclick = alterIt(1) shouldn't it wait till i click one. Anyway, obviously I am not ver good at javascript, thanks for your help.

window.onload = initialize;
function initialize() {
    if (1 == 1){
        calculation();           
    }
}
function calculation() {
    var one = document.getElementById('one');
    one.onclick = alterIt(1);
}

function alterIt(x) {
    console.log(x);
}

okay, yeah, of course there is a duplicate, but in my situation how am i supposed to know what to search for. — dezman, Aug 01 '12 at 18:41
possible duplicate of [How do i add onclick to a Div via JS?](http://stackoverflow.com/questions/11659564/how-do-i-add-onclick-to-a-div-via-js), [How to manipulate the "onclick" event](http://stackoverflow.com/q/11702724/1048572) and [assign onclick event to function](http://stackoverflow.com/q/3740761/1048572) — Bergi, Aug 01 '12 at 18:46
When I was learning JavaScript, the jQuery framework was very helpful. You should check it out. — James Kingsbery, Aug 01 '12 at 18:48
@watson: See this tutorial: http://www.quirksmode.org/js/events_tradmod.html#link2 — Bergi, Aug 01 '12 at 18:48
@JamesKingsbery: First learn JavaScript, then use jQuery after you have understood the basics. — Bergi, Aug 01 '12 at 18:49

score 9 · Answer 1 · answered Aug 01 '12 at 18:41

When you wrote:

one.onclick = alterIt(1);

...then you invoked the alterIt function and set the return value as the onclick handler. Instead, you wanted:

one.onclick = function(){ alterIt(1) };

// ...or better yet
one.addEventListener('click',function(){ alterIt(1) },false);

score 4 · Answer 2 · edited Aug 01 '12 at 18:45

4

When the line one.onclick = alterIt(1); is executed, alterIt(1) is actually evaluated. What you want is to bind a function to one.onclick, which is only executed when the onclick event fires. You need something like

one.onclick = function() { alterIt(1) };

which doesn't bind the result of alterIt(1) to one.onclick, but rather the result of the function evaluation.

edited Aug 01 '12 at 18:45

Phrogz

296,393
112
651
745

answered Aug 01 '12 at 18:42

Confusion

16,256
8
46
71

score 2 · Answer 3 · answered Aug 01 '12 at 18:42

Wrap the function call like this so it doesn't fire until click:

window.onload = initialize;
function initialize() {
    if (1 == 1){
        calculation();           
    }
}
function calculation() {
    var one = document.getElementById('one');
    one.onclick = function(){ alterIt(1);};
}

function alterIt(x) {
   console.log(x);
}

Example fiddle: http://jsfiddle.net/RkH6Q/

score 2 · Answer 4 · answered Aug 01 '12 at 19:05

There are two ways that you could code to work around this issue:

//Anonymous Closures
one.onclick = function(){ alterIt(1); };

//Bind Closures  
one.onclick = alertIt.bind(window, 1);

Note: Function.bind() is supported by all the browsers for a year. If you care about old browsers, anonymous closures is the way to go.

score -2 · Answer 5 · answered Aug 01 '12 at 18:42

-2

What is happening is that you are calling the alterIt function when you should just be passing it in. So remove the parenthesis like so:

one.onclick = alterIt;

answered Aug 01 '12 at 18:42

theabraham

15,840
9
42
41

1

No glory, since this does not properly preserve the parameter desired to be passed. – Phrogz Aug 01 '12 at 18:43

Noob javascript, why is this firing onload?

5 Answers5