javascript - Event listeners executing without event and looping through HTML collection - Stack Overflow

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

Share Follow edited Jun 8, 2015 at 5:18 user1693593 asked Jun 8, 2015 at 5:06 NotAnAmbiTurnerNotAnAmbiTurner 2,75333 gold badges2525 silver badges4747 bronze badges 8

• 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

 |  Show 3 more ments

2 Answers 2

Sorted by: Reset to default 7

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