I'm playing around with Javascript and created a class. On initializing the class, I add a button to a certain div and then add an event listener to that button for when it's clicked. What is happening though is that the function gets fired when the page loads, and not when the button is clicked. Here is my code:

    function Photobank(){
        this.photos;
        this.addPhotoButton;
    }

    Photobank.prototype.init = function(){
        var btn = document.createElement('button');
        btn.id = "photoupload";
        var t=document.createTextNode("ADD PHOTOS");
        btn.appendChild(t);
        this.addPhotoButton = btn;
        var pb = document.getElementById('photobank');
        pb.appendChild(this.addPhotoButton);
        this.addPhotoButton.addEventListener("click", this.launchMediaManager(), false);
    }

    Photobank.prototype.launchMediaManager = function(){
        alert("Launching Media Manager");
    }

Am I doing something noticeably wrong?

I'm playing around with Javascript and created a class. On initializing the class, I add a button to a certain div and then add an event listener to that button for when it's clicked. What is happening though is that the function gets fired when the page loads, and not when the button is clicked. Here is my code:

    function Photobank(){
        this.photos;
        this.addPhotoButton;
    }

    Photobank.prototype.init = function(){
        var btn = document.createElement('button');
        btn.id = "photoupload";
        var t=document.createTextNode("ADD PHOTOS");
        btn.appendChild(t);
        this.addPhotoButton = btn;
        var pb = document.getElementById('photobank');
        pb.appendChild(this.addPhotoButton);
        this.addPhotoButton.addEventListener("click", this.launchMediaManager(), false);
    }

    Photobank.prototype.launchMediaManager = function(){
        alert("Launching Media Manager");
    }

Am I doing something noticeably wrong?

• javascript

• possible duplicate of event listener in javascript not firing except for when the page is loaded – Felix Kling Commented Feb 6, 2014 at 23:38
• 2 You'd surprised how often this is asked. – Felix Kling Commented Feb 6, 2014 at 23:42
• @FelixKling Yeah, looks like that was my problem. Thanks for that link! – jordan Commented Feb 6, 2014 at 23:52
• 1 And in case you will run into problems with this: stackoverflow./questions/20279484/… ;) – Felix Kling Commented Feb 7, 2014 at 0:49

2 Answers 2

You're calling the function rather than passing the function as an argument to addEventListener. Take the parentheses off the end of the function name:

this.addPhotoButton.addEventListener("click", this.launchMediaManager, false);

It is because you are invoking the function and setting its result as the handler to the click event, instead set the function reference as the handler.

this.addPhotoButton.addEventListener("click", this.launchMediaManager, false);