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

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

• javascript
• dom-events

• ids should not begin with a digit. – Teemu Commented Jul 4, 2013 at 9:16
• @JonathanNaguin Its not working...If I click the tr...nothing is happening... – 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 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 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 Commented Jul 4, 2013 at 9:26

1 Answer 1

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 remend to read the excellent articles about event handling on quirksmode.