client-side javascript file set form tag attribute

Question

I want to make a login, signup webpage with nodejs. So I use form tag to send url and method. In my case form tag has two different submit buttons. below is HTML code

 <form id="login">
        <input type="text" placeholder="ID" id="id" name="id"> <br>
        <input type="password" placeholder="password" id="passwd" name="passwd"> <br>
        <input type="submit" value="login" id="login-btn"> 
        <input type="submit" value="signup" id="signup-btn">
    </form>
    <script src="index.js"></script>

Since I want to make these two buttons work differently I write simple js file to set forms' action and method.

const response = document.getElementById('login');
const attribute = function(obj, action, method){
    response.setAttribute('action', action);
    response.setAttribute('method', method);
}

const login = document.getElementById('login-btn');
login.addEventListener('click', attribute(response, '/login', 'POST'));

const signup = document.getElementById('signup-btn');
signup.addEventListener('click', attribute(response, '/signup', 'GET'));

When I write like that both buttons work as signup button. So I only can access signup page.

However, when I write js file without declaring function

const response = document.getElementById('login');
const login = document.getElementById('login-btn');
login.addEventListener('click', () => {
    response.setAttribute('action', "/login");
    response.setAttribute('method', "POST");
});

const signup = document.getElementById('signup-btn');
signup.addEventListener('click', () => {
    response.setAttribute('action', "/signup");
    response.setAttribute('method', 'GET');
});

it works well. Can you guys tell me what is different between two js codes? And why is this happening?

Answer 1

As per the MDN documentation for [addEventListener] 1 , the syntax is given by

target.addEventListener(type, listener [, options]);

listener

The object that receives a notification (an object that implements the Event interface) when an event of the specified type occurs. This must be an object implementing the EventListener interface, or a JavaScript function . See The event listener callback for details on the callback itself.

If you observe the 2nd argument in the following line of code, you will notice, that it's not a function , it's rather the return value of the function , which is, undefined by default (because you haven't specified any return values):

login.addEventListener('click', attribute(response, '/login', 'POST'));

To validate what I am saying here, please do the following:

typeof attribute(response, '/login', 'POST');
> undefined

So, essentially, this following line:

login.addEventListener('click', attribute(response, '/login', 'POST'));

evaluates to

login.addEventListener('click', undefined);

whereas, in the following snippet, the 2nd argument is clearly an arrow function:

document.getElementById('login-btn');
login.addEventListener('click', () => {
    response.setAttribute('action', "/login");
    response.setAttribute('method', "POST");
});

.. and that is the source of the difference in behavior between two.

I hope I clarified your doubt. If I din't, please post a comment.

Answer 2

You're trying to use attribute as the callback, but you're calling the function which returns undefined and when the click event happens it just tries to call undefined . You need to wrap those attribute calls in another function to be able to run it that way. Something like...

const login = document.getElementById('login-btn');
login.addEventListener('click', () => {
  attribute(response, '/login', 'POST')
});

const signup = document.getElementById('signup-btn');
signup.addEventListener('click', () => {
  attribute(response, '/signup', 'GET')
});