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

Question

I can't get the button within the signIn function to execute on the onclick event. I need help understanding what I am doing wrong and what needs to be done to fix it. I am building a simple silly app to learn javascript/typescript. The other buttons earlier in the app work and I am able to transform the DOM but the button built within the signin function doesn't seem to fire and execute the isValid function. I have no errors within the web console. I am completely stumped as to why the button will not execute the isValid function.

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

Answer 1

This is a classic scoping problem.

When the okay button is added, this is not pointing where you thinking it is pointing.

You assumed this would be referring to the App function. But the okay button is not created by the App function, is it created by the sin button. And that's why this , in that location, points to the sin button, and since there no isValid function in the sin button, you don't get the alert you wanted.

To fix this you can change this.isValid to App.prototype.isValid .

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

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

This will get the desired behavior.