Question

I have the following javascript. For eample the console.log('test')triggers when I load the javascript. I expect it to trigger when I click a button with the class login. What am I doing wrong?

$(document).ready(function() {
    switchImage(5000, '#top .images');
    switchImage(5000, '#top .feature-text');
    $('.login input').focus(function(){
        $('.login .hidden').removeClass("hidden");
        $('.login [type=text]').removeClass("span2").addClass("span3");
    });
    $('.loginbutton').click(login());
});


function login(){
    event.preventDefault();
    console.log('test')
}

function switchImage(wait, element){

    //Fades out first element and put's it in the bottom of the stack
    $(element+'>*:first-child').delay(wait).fadeOut('slow', function() {

        //fade in imag2
        $(element+'>*:nth-child(2)').fadeIn('slow');
        $(element+'>*:first-child').appendTo(element); 
        switchImage(wait, element);
    });
}

Answer 1

You have:

$('.loginbutton').click(login());

This says “When the button is clicked, invoke the result of login().

What you want is:

$('.loginbutton').click(login);

Which is “When the button is clicked, invoke the login function”.