JavaScript code editing

Question

Sorry if this is a stupid question, I am doing a project in JQuery and I do not have time to physically learn it so I am effectively jumping straight in.

So I am editing a piece of code which is originally this:

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

So when the login button is clicked the login function is called. Adding the line:

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

After that line works as expected, triggering the click and then runs the login function. But simply replacing those two lines with:

login();

HTML

<form action="#">
    <div class="form-group">
        <input type="text" id="nickname" class="form-control" placeholder="Enter nickname" autofocus> 
   </div> 
   <button type="submit" id="login" class="btn btn-primary btn-block">Connect</button>   
</form>

Javascript

var elem = document.getElementById("nickname"); 
elem.value = "tom"; 
$('#login').click(login); 
$('#login').click();

Does not work at all? I don't get it. Surely I am just calling the function and bypassing having to have the actual button in DOM?

Update I do have the function login defined below where the click function is in the code itself, I just felt it unecessary to post that code here as it is only calling the function that is the problem.

Update 2 Here is the login function that is being called:

function login(event) {

    event.preventDefault();

    params = {
        login: $('#nickname').val(),
        password: '123123123' // default password
    };

    // check if user did not leave the empty field
    if (trim(params.login)) {
        $('#loginForm form').hide();
        $('#loginForm .progress').show();

        // chat user creation
        QB.users.create(params, function(err, result) {
            if (err) {
                onConnectFailed();
                alertErrors(err);
            } else {
                chatUser = {
                    id: result.id,
                    login: params.login,
                    pass: params.password
                };

                // chat user authentication
                QB.login(params, function(err, result) {
                    if (err) {
                        onConnectFailed();
                        alertErrors(err);
                    } else {
                        connectChat();
                    }
                });
            }
        });
    }
}

Answer 1

it depends on the scope where you call login function.

Check where you have something like

function login(){
   //some code
}

and be sure that the region of code where you are calling the function can see it.

Have a read here

update

looking at your code I can see that you haven't a login function but you are just submitting the form because login input is of type "submit".

try just

$("#idOfTheForm").submit();

assuming that

<form action="#" id="idOfTheForm">

update 2

I think that some information are missing about your code. As you are saying it's impossible that something happens if you have no handlers. If you don't have a login function neither an action for your form it's impossible that something happens. Maybe you have some other code in others files.

update 3

I think that the only problem in your login function is that it has 1 parameter input and as first line of code you use it (the error breaks the execution).

try in this way

function login(event) {

 if (event != null)   
     event.preventDefault();

//other code

}

and then call it simply with login();

Answer 2

$('#login').click() is like a trigger; when user chick on #login, then it launch the code inside ()

$( "#login" ).click(function() {
  alert( "Handler for .click() called. on login" );
});

if you just do

function login(){}

there will be a function that do the work you want but the function will never be called.

if you do

function login(){}
login();

it signify that you have a function that do the work you want and the function is launched when code is running, and not when user click on something.

Answer 3

When you do

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

you're telling you want the login() function to be called as handler of the event "click" on "login" element.

In the code above I don't see where you defined your login() function. If you do a login() and "nothing happens" it's because the function is not defined from the place you're calling it...

You should have somewhere in your HTML code a snapshot looking like this:

<script>
    function login(...){
     //....body....
    }
</script>

Answer 4

In the previous two cases you have id of the element "login" where your function login() is written.but in the last case you just have a function in your code which is not called by you. so, it was not working.

for first two cases i think your  code is some thing like 
<div id="login">login</div>
<script>
 $('#login').click(function(){
  //some code
 });
</script>

you can find the similar question here(jQuery.click() vs onClick). for the third one the login() is not triggered any were