Question

我无法在signIn函数中获取按钮以在onclick事件上执行。我需要帮助了解我做错了什么以及需要做些什么来解决它。我正在构建一个简单的傻应用程序来学习javascript /打字稿。应用程序早期的其他按钮工作，我能够转换DOM，但在登录功能中构建的按钮似乎不会触发并执行isValid函数。我在Web控制台中没有错误。我完全难以理解为什么按钮不会执行isValid函数。

＆＃13;

  var App = /** @class */ (function () {
  function App() {
      this.init();
  }
  App.prototype.init = function () {
      if (!window['WebSocket']) {
          console.log("BROWSER NOT SUPPORTED");
          document.body.innerHTML = "BROWSER NOT SUPPORTED";
      }
      document.documentElement.style.background = "green";
      document.title = "App";
      var sin = document.createElement("button");
      sin.id = "sin";
      sin.innerHTML = "SIGN IN";
      sin.onclick = this.signIn;
      var sup = document.createElement("button");
      sup.id = "signup";
      sup.innerHTML = "SIGN UP";
      sup.onclick = this.signUp;
      var landing = document.createElement("div");
      landing.id = "landing";
      landing.style.position = "absolute";
      landing.style.left = "50%";
      landing.style.top = "50%";
      landing.style.transform = "translate(-50%,-50%)";
      landing.appendChild(sin);
      landing.appendChild(sup);
      document.body.appendChild(landing);
  };
  App.prototype.signIn = function () {
      document.body.removeChild(document.getElementById("landing"));
      var user = document.createElement("input");
      user.type = "text";
      user.id = "username";
      user.placeholder = " username";
      user.style.border = "1px solid";
      user.style.width = "150px";
      var pass = document.createElement("input");
      pass.type = "password";
      pass.id = "password";
      pass.placeholder = " password";
      pass.style.border = "1px solid";
      pass.style.width = "150px";
      var okay = document.createElement("button");
      okay.innerHTML = "Sign in";

  //I can't get the isValid function to execute.

      okay.onclick = this.isValid;
      var signin = document.createElement("div");
      signin.id = "signin";
      signin.style.position = "absolute";
      signin.style.left = "50%";
      signin.style.top = "50%";
      signin.style.transform = "translate(-50%,-50%)";
      signin.appendChild(user);
      signin.appendChild(document.createElement("br"));
      signin.appendChild(pass);
      signin.appendChild(document.createElement("br"));
      signin.appendChild(okay);
      document.body.appendChild(signin);
  };
  App.prototype.signUp = function () {
      alert("alert!");
  };
  App.prototype.isValid = function () {
      alert("alert!");
  };
  return App;
  }());
  window.onload = function () {
      var app = new App();
  };

＆＃13;

Answer 1

这是一个经典的范围界定问题。

添加了okay按钮后，this并未指向您认为它指向的位置。

您假设this将引用App函数。但是okay按钮不是由App函数创建的，而是由sin按钮创建的。这就是为什么this在该位置指向sin按钮的原因，并且由于isValid按钮中没有sin功能，因此您不会收到警报想要的。

要解决此问题，您可以将this.isValid更改为App.prototype.isValid。

// from this
okay.onclick = this.isValid;

// to this
okay.onclick = App.prototype.isValid;

这将获得所需的行为。

解释为什么函数在单击按钮时不会执行

1 个答案: