dom events - Add an onclick listener with an existing function using JavaScript - Stack Overflow

admin管理员组

文章数量:1022553

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

Share Improve this question Follow edited Mar 17, 2023 at 9:29 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Jul 4, 2013 at 9:12 pmark019pmark019 1,20955 gold badges1616 silver badges2424 bronze badges 5

• 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

Add a ment  | 

1 Answer 1

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

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

Share Improve this question Follow edited Mar 17, 2023 at 9:29 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Jul 4, 2013 at 9:12 pmark019pmark019 1,20955 gold badges1616 silver badges2424 bronze badges 5

• 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

Add a ment  | 

1 Answer 1

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

本文标签： dom eventsAdd an onclick listener with an existing function using JavaScriptStack Overflow