Code 1 is not working but the other is. What is wrong with 1st code?

Question

I'm trying to learn javascript. For the life of me I can't tell what is wrong with my object code below. I get an error saying:

this.signIn is not a function

let socialAppFunctions = {
  displayNewsFeed: function () {
    let socialPostsSection = document.querySelector("#socialPosts");

    newsFeed.forEach(function (posts) {
      let socialPosts = document.createElement("h4");
      socialPosts.textContent = posts;
      socialPostsSection.appendChild(socialPosts);
    });
  },
  loginButton: function () {
    let loginButton = document.querySelector("#loginButton");

    loginButton.addEventListener("click", function() {

      let userName = document.querySelector("#user");
      let passWord = document.querySelector("#pass");

      this.signIn(userName.value, passWord.value);

    });
  },
  signIn: function (username, password) {

    if (this.userValidation(username, password)) {
        this.displayNewsFeed();
      } else {
        alert("Please check username and password");
      }
  },
  userValidation: function (username, password) {

    for (let i = 0; i < database.length; i++) {
      if (database[i].username === username && database[i].password === password) {
        return true;
      }
    }
    return false;
  }
};

socialAppFunctions.loginButton();

This one below works if I don't put them as inside as one object:

function signIn (username, password) {

      if (userValidation(username, password)) {
        displayNewsFeed();
      } else {
        alert("Please check username and password");
      }
    }

function userValidation (username, password) {

    for (let i = 0; i < database.length; i++) {
      if (database[i].username === username && database[i].password === password) {
        return true;
      }
    }
    return false;
  }


function loginButton () {
    let loginButton = document.querySelector("#loginButton");

    loginButton.addEventListener("click", function() {

      let userName = document.querySelector("#user");
      let passWord = document.querySelector("#pass");

      signIn(userName.value, passWord.value);

    });
  }
loginButton();

function displayNewsFeed () {
    let socialPostsSection = document.querySelector("#socialPosts");

    newsFeed.forEach(function (posts) {
      let socialPosts = document.createElement("h4");
      socialPosts.textContent = posts;
      socialPostsSection.appendChild(socialPosts);
    });
  }

Shijil Narayanan · Accepted Answer · 2020-05-30T12:12:04.303

It's about the context of this keyword within your addEventListener block in the above code.

The value of this will refer to loginButton inside the add event listener and loginButton doesnt have a signIn method, to make your code still work you need to bind this by doing the following.

loginButton.addEventListener("click", function() {

      let userName = document.querySelector("#user");
      let passWord = document.querySelector("#pass");

      this.signIn(userName.value, passWord.value);

    }.bind(this));

And now this inside addEventListener block will refer to socialAppFunctions object and it would work.

Code 1 is not working but the other is. What is wrong with 1st code?

1 Answers1