Javascript 不需要时多次显示的Typescript警报

我试图让按钮在单击按钮时发出单个警报，但按钮显示了一些奇怪的信息：

第一次单击登录按钮时，警报显示一次，再次单击时，警报显示两次，然后第三次单击按钮时，警报显示三次。 之后，如果我单击忘记密码按钮，分配给忘记密码的警报将显示4次

我很困惑为什么会发生这种情况，以及如何解决它

.ts

.html

Capstone打字脚本登录
比利·布朗科评分计算器
登录

登录

谢谢大家!

---

每次单击enter按钮时，您都在构造函数中设置新的事件侦听器。它们相互叠加在一起。此外，您在错误的时间设置用户名和密码值。当用户尝试验证其输入时（单击“提交”按钮），应设置它们。构造函数应该在html和脚本加载后实例化，例如在window.onload事件中

window.onload = function() {
    let loginTs = new LoginTs();
}

这是你的课，有一些变化。用户名和密码变量在用户单击按钮之前不会设置，因为这是您要捕获它们进行验证的点

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

---

每次单击该按钮时，都会实例化一个新的登录，该登录绑定了新的事件侦听器。它们是添加的，而不是替换的。@ChrisHeald我试图替换它，但与使用window.onload相比，按钮加载警报所需的时间要长得多；我更喜欢使用替换策略，因为它允许电子邮件和密码的多个输入，但我不知道如何提高效率？如果你能帮我找到答案，我会非常感激，因为我对打字很不熟悉。谢谢这是第一次工作，但我意识到在运行它时，它也给了bug它只返回相同的警报，即使输入被更改，你知道为什么或如何修复它吗？对不起，我第一次没有发现。您捕获这些值太早了。这些html元素的

值应在用户单击submit按钮后进行评估。请参阅修改后的答案，因此，我删除了构造函数的初始化参数，因为在构造时设置用户名和密码没有任何意义
window.onload = function() {
    let loginTs = new LoginTs();
}

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