Failing adding function to addEventListener()

Question

I try to add event listener function, but for some reason it fails. See example:

<!DOCTYPE html>
<html>
    <head>
        <script>    
        function loaded(){
                document.getElementById("first").addEventListener("click", showPopup());

        }


        function showPopup(){
            alert('hello');
        }


</script>
    </head>
    <body onload="loaded()">        
        <div id="first"> 
            click me !!!
        </div>
    </body>
</html>

Clicking on the "click me!!!" text do nothing, furthermore showPopup() function fires once.

I deeply apologize for this trivial question, but I am spending too much time to see the mistake.

Thanx a lot

`("click", showPopup())` should just be `("click", showPopup)`. You want to pass the *function*, not run it. — gen_Eric, Dec 06 '16 at 20:34
eh... I removed brackets on showPopup(), it runs fine... :-/ — lyborko, Dec 06 '16 at 20:34

score 1 · Answer 1 · answered Dec 06 '16 at 20:34

1

You should not execute the function, but pass it:

Instead of this:

document.getElementById("first").addEventListener("click", showPopup());

do:

document.getElementById("first").addEventListener("click", showPopup);

answered Dec 06 '16 at 20:34

trincot

317,000
35
244
286

score 1 · Answer 2 · answered Dec 06 '16 at 20:34

1

Try this

document.getElementById("first").addEventListener("click", showPopup);

removed () in showPopup

`

answered Dec 06 '16 at 20:34

Dave

2,764
2
15
27

Failing adding function to addEventListener()

2 Answers2