Typescript Alert showing multiple times when not needed
Question
I am trying to get the button to do a single alert when the button is clicked, but the button odes something strange:
The first time I click the Login Button, the alert shows once, when I click it again the alert shows 2 times, then I click the button a 3rd time, the alert shows 3 times. After that, If I were to click the Forgot Password Button, the alert assigned to Forgot password would show 4 times.
I am very confused as to why this happens and how to fix it?
.ts
class LoginTs{
username: string;
password: string;
constructor(username: string, password: string ) {
this.username = username;
this.password = password;
let submitBtn = document.getElementById("enter")
submitBtn.addEventListener("click", (e: Event) => {
return LoginTs.validateInput(this.username,this.password)
});
let forgotBtn= document.getElementById("forgotPass")
forgotBtn.addEventListener("click",(e:Event) =>LoginTs.forgotPassword());
}
private static validateInput(username: string, password: string) {
if(username =="billy" && password =="bronco1"){
return alert("success")
}
else{
return alert("wrong username or password")
}
}
private static forgotPassword() {
return alert("tough luck lmao")
}
}
document.getElementById("enter").addEventListener("click", function() {
let iUser =(document.getElementById("se") as HTMLInputElement).value;
let iPass =(document.getElementById("sp") as HTMLInputElement).value;
let loginTs = new LoginTs(iUser,iPass);
})
.html
<HTML>
<HEAD>
<TITLE>Capstone Typescript Login</TITLE>
</HEAD>
<BODY>
<header>
<h2>Billy Bronco's Grading Calculator</h2>
</header>
<div id="container">
<div id="tabs">
<p type="button" id="lt" class="tabs" onclick="loginTabFun()">Log in</p>
<link rel="stylesheet" href="Login.css">
<div id="clear"></div>
</div>
<div id="cont">
<div id="login" class="comm">
<h3>Sign in</h3>
<input id="se" type="email" placeholder="Email" required/>
<input id="sp" type="password" placeholder="Password" required/>
<input type="button" class="button" id="enter" value="Login">
<input type="button" class="button" id="forgotPass" value="Forgot Password?">
<a href="register_view.html" > Don't have an account? CLICK HERE </a>
</div>
</div>
</div>
<script src="LoginTs.js"></script>
</BODY>
</HTML>
Thank You!
1 answers
solution1
1 ACCPTED 2021-05-18 22:09:35
You are setting up new event listeners in your constructor every time the enter button is clicked. They're compounding on top of each other. Additionally, you're setting the username and password values at the wrong time. They should be set when the user tries to validate their input (clicks the submit button). The constructor should be instantiated after the html and script have loaded, eg. in a window.onload event
window.onload = function() {
let loginTs = new LoginTs();
}
Here is your class with a couple changes. The username and password variables aren't set until the user clicks the button, since that is the point at which you want to capture them for validation.
class LoginTs{
username: string;
password: string;
constructor( ) {
// this.username = username;
// this.password = password;
let submitBtn = document.getElementById("enter")
submitBtn.addEventListener("click", (e: Event) => {
this.username =(document.getElementById("se") as HTMLInputElement).value;
this.password =(document.getElementById("sp") as HTMLInputElement).value;
return LoginTs.validateInput(this.username,this.password)
});
let forgotBtn= document.getElementById("forgotPass")
forgotBtn.addEventListener("click",(e:Event) =>LoginTs.forgotPassword());
}
private static validateInput(username: string, password: string) {
if(username =="billy" && password =="bronco1"){
return alert("success")
}
else{
return alert("wrong username or password")
}
}
private static forgotPassword() {
return alert("tough luck lmao")
}
}
window.onload = function() {
let loginTs = new LoginTs();
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.