时间戳

首页 > 解决方案 > 代码 1 不起作用，但另一个是。第一个代码有什么问题？

javascript - 代码 1 不起作用，但另一个是。第一个代码有什么问题？

问题描述

我正在尝试学习javascript。对于我的一生，我无法说出下面我的目标代码有什么问题。我收到一条错误消息：

this.signIn 不是函数 

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();

如果我不将它们作为一个对象放在里面，则下面的这个可以工作：

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);
    });
  }

标签： javascript

解决方案

这是关于this上面代码中 addEventListener 块中关键字的上下文。

的值this将loginButton在 add 事件侦听器内部引用并且loginButton没有 signIn 方法，要使您的代码仍然有效，您需要this通过执行以下操作进行绑定。

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

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

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

    }.bind(this));

现在this在 addEventListener 块内将引用socialAppFunctions对象并且它会工作。

推荐阅读