Question

I’m making my first stab at writing some oo style js. When my page loads, it’s executing my login() function twice and the event listener that I want to fire the login() isn’t working at all. Any help would be greatly appreciated. Here is my code:

(function( window, undefined ) {
var document = window.document,
    navigator = window.navigator,
    location = window.location;
//build the login button
var DA = {
    width : '70px',
    height : '20px',

    createLoginButton : function(){
        var a = document.createElement('a');
        a.style.width = this.width;
        a.style.height = this.height;
        a.style.cursor = 'pointer';
        var div = document.createElement('div');
        div.id = 'da_login_button';
        div.onclick = DA.login();
        div.innerHTML = "client login";
        div.style.width = this.width;
        div.style.height = this.height;
        div.style.backgroundColor = '#59724A';
        div.style.color = 'white';
        div.style.border = '4px solid #6B5D49';
        div.style.padding = '3px';
        div.style.textAlign = 'center';
        a.appendChild(div);
        return a;
    },

    //write the button to the dom
    writeLoginButton : function(){
        var dest = document.getElementById('digital_arborist_login');
        dest.style.width = this.width;
        dest.style.height = this.height;
        var theButton = DA.createLoginButton();
        dest.appendChild( theButton );
        theButton.addEventListener("click", DA.login(), false);
    },

    //detect ssl
    isSecure : function(){
        if (location.protocol === 'https:') {
            return true;
        } else {
            return false;
        }
    },

    // the login function
    login : function(){ 
        alert('href: '+location.href+'<br />protocol: '+location.protocol);
    },

};  
window.DA = DA; 
})( window )

// start the magic
DA.writeLoginButton();

Here is the web page where I’m testing my code.

Answer 1

Change this:

theButton.addEventListener("click", DA.login(), false);

to:

theButton.addEventListener("click", DA.login, false);

and this:

div.onclick = DA.login();

to:

div.onclick = DA.login;

You want to assign the function itself as the callback in each case. You are actually executing the function and assigning the result of the function call as the callback… That is why your “login” method is running twice at startup and why your click events are not functioning properly.

You should also remove the undefined argument from the first line. undefined is a keyword in javascript and I’m honestly surprised that you didn’t get a syntax error from that. It should look like:

(function(window) {