I am trying to write a loop to initialize event handlers in JavaScript.

I think I am doing something wrong, because my debugging function is being activated without the event (the click) occurring.

What I want to do is this:

var JS_elements = document.getElementsByClassName("JS")

for (y = 0; y < JS_elements.length; y++){
    document.write(JS_elements.item(y).innerHTML);
    JS_elements.item(y).addEventListener("click",testfunc());
}

function testfunc() {
    alert("TestFunc");
}

and have testfunc() run when I click on an element with a class="JS".

The line document.write(JS_elements.item(y).innerHTML); line executes correctly, so I know I am getting to the correct objects. Sadly, the mented line is causing this to break: testfunc() runs three times automatically on the page load.

Can anyone explain why this is happening? The only thing I can think is that "click" is being evaluated as true for some reason.

HTML:

<header>
    <hr>
        <p>- Header Background Color Controller -</p>
        <table>
            <tr>
                <td>Javascript Controller:</td>
                <td class="JS">Red
                    <input type="hidden" value='false'>
                </td>
                <td class="JS">Green
                    <input type="hidden" value='false'>
                </td>
                <td class="JS">Blue
                    <input type="hidden" value='false'>
                </td>
            </tr>
            <tr>
                <td>jQuery Controller:</td>
                <td class="jQ" value=false>Red</td>
                <td class="jQ" value=false>Green</td>
                <td class="jQ" value=false>Blue</td>
            <tr>
        </table>
    <hr>
</header>

I am trying to write a loop to initialize event handlers in JavaScript.

I think I am doing something wrong, because my debugging function is being activated without the event (the click) occurring.

What I want to do is this:

var JS_elements = document.getElementsByClassName("JS")

for (y = 0; y < JS_elements.length; y++){
    document.write(JS_elements.item(y).innerHTML);
    JS_elements.item(y).addEventListener("click",testfunc());
}

function testfunc() {
    alert("TestFunc");
}

and have testfunc() run when I click on an element with a class="JS".

The line document.write(JS_elements.item(y).innerHTML); line executes correctly, so I know I am getting to the correct objects. Sadly, the mented line is causing this to break: testfunc() runs three times automatically on the page load.

Can anyone explain why this is happening? The only thing I can think is that "click" is being evaluated as true for some reason.

HTML:

<header>
    <hr>
        <p>- Header Background Color Controller -</p>
        <table>
            <tr>
                <td>Javascript Controller:</td>
                <td class="JS">Red
                    <input type="hidden" value='false'>
                </td>
                <td class="JS">Green
                    <input type="hidden" value='false'>
                </td>
                <td class="JS">Blue
                    <input type="hidden" value='false'>
                </td>
            </tr>
            <tr>
                <td>jQuery Controller:</td>
                <td class="jQ" value=false>Red</td>
                <td class="jQ" value=false>Green</td>
                <td class="jQ" value=false>Blue</td>
            <tr>
        </table>
    <hr>
</header>

• javascript
• html
• for-loop
• addeventlistener

• 3 Are you aware what () after a function name does? testfunc doesn't return a function, why to call it when setting an event listener? – Teemu Commented Jun 8, 2015 at 5:09
• I'm just using testfunc() for debugging. – NotAnAmbiTurner Commented Jun 8, 2015 at 5:12
• Please show the real code you have. Notice, that document.write will break the code anyway, if it's executed after the page has been parsed. – Teemu Commented Jun 8, 2015 at 5:13
• This is the real code I have. – NotAnAmbiTurner Commented Jun 8, 2015 at 5:15
• Then please re-read my first ment. – Teemu Commented Jun 8, 2015 at 5:16

2 Answers 2

Change this:

JS_elements.item(y).addEventListener("click",testfunc());

to this:

JS_elements.item(y).addEventListener("click",testfunc);

The () causes the function to be executed immediately and the return result is passed to addEventListener(). That is not what you want. Instead, you want to pass a function reference which should be just the name of the function testfunc without the () after it.

If you want to pass arguments to testfunc and they are the same arguments for all the event handlers, then you can create an intermediary anonymous function:

JS_elements.item(y).addEventListener("click",function() {
    testfunc("whatever");
});

Just do this: JS_elements.item(y).addEventListener("click",testfunc);