Add an onclick listener with an existing function using JavaScript

Question

I have an existing JavaScript function:

function changeColor(ID){

    try{
        initialize();
    }
    finally{
        changeDesign(ID);
    }
    
}

I want to do something like this:

for(var x=0; x<2; x++){
        document.getElementById(x).onclick = "changeColor(" + x +")";
}

The output with the html should be:

<tr bgcolor="#FFFFFF" id="0" onclick="changeColor(0)>

@JonathanNaguin Its not working...If I click the tr...nothing is happening... — pmark019
– pmark019, Commented Jul 4, 2013 at 9:21
@FelixKling I also tried 'document.getElementById(x).onclick = changeColor(x);' but when I run the application, it performs the function...what I want is for the user to first click the tr before the function is performed. — pmark019
– pmark019, Commented Jul 4, 2013 at 9:23
Is that so surprising? changeColor(x) calls the function changeColor and then the return value will be assigned to .onclick. If I do var foo = bar(42);, then bar will be executed and the return value will be assigned to foo. That's how function calling works (but now worries, people seem to get confused when it's about event handlers ;)). — Felix Kling
– Felix Kling, Commented Jul 4, 2013 at 9:24
@pmark019: See the answer by Felix Kling. You must not include (0) because then you say: "Run the function and set the return value as onclick event". — awe
– awe, Commented Jul 4, 2013 at 9:26

Felix Kling · Accepted Answer · 2013-07-04 09:23:33Z

5

Assigning an event handler via the DOM API does not modify the actual HTML (in fact, the HTML source that the browser receives is readonly).

You have to assign a function to .onclick, not a string:

for(var x=0; x<2; x++){
    document.getElementById(x).onclick = changeColor;
}

where changeColor is defined as

function changeColor(){
    var ID = this.id; // `this` refers to element the handler is bound to

    try{
        initialize();
    }
    finally{
        changeDesign(ID);
    }

}

I recommend to read the excellent articles about event handling on quirksmode.org.

edited Jul 4, 2013 at 9:23

answered Jul 4, 2013 at 9:17

Felix Kling

820k181 gold badges1.1k silver badges1.2k bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

awe Over a year ago

Alternatively you can provide input parameter by wrapping in inline function like this: document.getElementById(x).onclick = function(){changeColor(x)};. This is useful if you need input parameters that is not accessible as properties on the element, only at the time of event binding.

Felix Kling Over a year ago

Right, in this case you would have to use an IIFE though, to capture the value of the variable x: (function(x) { document.getElementById(x).onclick = function(){changeColor(x)}; }(x));.

Collectives™ on Stack Overflow

Add an onclick listener with an existing function using JavaScript

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related