没有角度或反应的 TypeScript 和 HTML 按钮可能吗？答案

【问题标题】：TypeScript and HTML Buttons without angular or react possible?没有角度或反应的 TypeScript 和 HTML 按钮可能吗？
【发布时间】：2021-08-01 05:19:35
【问题描述】：

我是 Typescript 的新手，想用 Typescript 做一个小的登录页面。我已经将 .ts 代码转译成 .js 了，但是按钮仍然不起作用。

遗憾的是，没有任何关于这方面的教程没有 angular 或对 TypeScript 做出反应，我对如何前进感到非常困惑。

目前，我的按钮工作尽可能简单：它们现在应该做的就是调用警报

我想知道为什么会这样以及我的代码哪里出错了。一切都很好，编译时没有错误。

这是我的 .ts 代码

interface LoginInfo{
    username: string;
    password: string;
}
class LoginTs{
    username: string;
    password: string;

    constructor(username: string, password: string ) {
        this.username=(<HTMLInputElement>document.getElementById("se")).value;
        this.password=(<HTMLInputElement>document.getElementById("sp")).value;
        

        let submitBtn= document.getElementById("enter")
        submitBtn.addEventListener("click",(e:Event) =>{ return loginTs.validateInput()});

        let forgotBtn= document.getElementById("forgotPass")
        forgotBtn.addEventListener("click",(e:Event) =>loginTs.validateInput());
    }

    validateInput(){
             return alert("wrong user or password but good job erin")
    }
    //validateInput(user:string, pass:string){
      //   if(user =="billy" && pass =="bronco1"){
      //       alert("success")
      //   }
      //   else{
      //       alert("wrong user or password but good job erin")
      //   }
  //  }
}

let submit= document.getElementById("submit").addEventListener("click", () => {
     let username = (document.getElementById("se") as HTMLInputElement).value;
     let password = (document.getElementById("sp") as HTMLInputElement).value;

    });


let loginTs = new LoginTs("billy", "bronco");
loginTs.validateInput();

这是我的 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 id="lt" class="tabs" onclick="loginTabFun()">Log in</p>
        <p id="rt" class="tabs" onclick="regTabFun()">Register</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?">

        </div>


        <div id="register" class="comm">
            <h3>Register</h3>

            <input id="re" type="email" placeholder="Email" required/>
            <input id="rp" type="password" placeholder="Password" required/>
            <input id="rrp" type="password" placeholder="Re write Password" required/>
            <input type="submit" onclick="register()" value="Submit"/>

        </div >


        <div id="forgot" class="comm">
            <h3>Forgot Password</h3>
            <div>
                <input id="fe" type="email" placeholder="Email" required/>
                <input type="submit" onclick="forgot()" value="Submit"/>
            </div>
        </div>

    </div>

</div>
<script src="LoginTs.js"></script>
</BODY>
</HTML>

这是我的 tsconfig.json

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es5",
    "sourceMap": true
  },
  "exclude": [
    "node_modules"
  ],
  "files" : ["../typings/tsd.d.ts", "<LoginTs.ts>"]
}

非常感谢，一旦我了解了如何让基本按钮正常工作，我想我就可以继续前进了。

【问题讨论】：

嗨，一个简单的方法来测试你的转译的 js 文件是否正确附加是在文件中放一个简单的 alert("hi") 。你尝试过类似的方法吗？
您是否在运行时点击时检查了 javascript 控制台是否有错误？ loginTs 可能未定义。
@NisanthReddy 它也没有显示警报（“hi”），我检查了它的保存位置，它与.html 在同一个文件夹中，所以我不明白他们为什么不显示不行。我也在使用 Intellij，它可以很好地将 .ts 编译成 .js
有很多关于如何向按钮添加点击事件处理程序的资源。这不是特定于打字稿的。
嗨@ErinB。如果警报不起作用，那么问题肯定出在 ts 上。检查您是否正确转译以及您的文件夹结构是否正确。

标签： javascript html typescript

【解决方案1】：

我已尝试运行您的文件，但您似乎有 3 个小问题。

空指针错误 - 没有 ID 为 submit 的元素。因此，您的代码中的 document.getElementById("submit") 给出了一个 null ，当用于调用 addEventListener 时会引发错误。这可以在 chrome 控制台中看到。
在您的 html 代码中，您已将 onClick 参数设置为 register() 和 forgot()，而它们应该只是 register 和 forgot 像这样
<input type="submit" onclick="forgot()" value="Submit"/>
在您的 tsconfig 中，应该只是 "LoginTs.ts" 而不是 "<LoginTs.ts>"。

解决这 3 点应该足以让您启动并运行它。 tsconfig 都是正确的。没问题。

【讨论】：