没有 React 的 HTML 和 Typescript 按钮？答案

【问题标题】：HTML and Typescript buttons without React?没有 React 的 HTML 和 Typescript 按钮？
【发布时间】：2021-07-30 02:35:24
【问题描述】：

更新的代码（仍然不起作用） 我一直在试图弄清楚为什么我的按钮在 html 上不起作用，并且我看到的所有教程都使用 React 或 Angular。我想知道是否有办法让我的代码在没有它的情况下运行。

这是我得到的最简单的方法，而且我一直关注的示例都没有让它运行。目前它只是一个发出警报的按钮，我只需要帮助来弄清楚如何让这个小部分工作

编辑： 从 .ts 转换为 .js，将 forgotBtn 更改为与 eventListener 相同

这是我的 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>

这是我的打字稿代码：


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")
    }

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

谢谢！

【问题讨论】：

Typescript 不能在浏览器上本地运行。您必须使用 javascript 或使用编译器将您的 Typescript 转换为 Javascript。所以你的文件<script src="LoginTs.ts"></script> 将不会被正确解析。
就像@martin66 所说的Typescript 不是浏览器可以理解的东西，但是可以在浏览器中使用Typescript 而不必事先通过使用-> github.com/basarat/typescript-script

标签： javascript html typescript

【解决方案1】：

这就是 jQuery 所做的让它如此受欢迎的原因 - 在构建 DOM 之前，您的 JS 将无法找到任何东西。您希望在 DOMContentLoaded 事件之后发生事件连接。

您的脚本标签中还有一个 .ts 文件，但您需要为浏览器转译的 .js 文件。将其更改为：

<script src="LoginTs.js"></script>

LoginTs.js 是默认值，或者在tsconfig.json 设置输出的任何位置设置。

那么您的 DOM 查询与您的 HTML 不匹配：

<input id="se" type="email" placeholder="Email" required/>
<input id="sp" type="password" placeholder="Password" required/>

this.username=(<HTMLInputElement>document.getElementById("email")).value;                      
this.password=(<HTMLInputElement>document.getElementById("password")).value;

将其更改为：

this.username=(<HTMLInputElement>document.getElementById("se")).value;                      
this.password=(<HTMLInputElement>document.getElementById("sp")).value;

接下来，您尝试在忘记按钮上调用 onclick="validateInput()"，但该方法是 loginTs 上的一个实例，在脚本文件中使用 let 声明 - 您最好订阅所有控件相同方式并避免onclick，但是如果您想在脚本之外引用您的实例方法，您需要切换到var loginTs 或显式设置全局window.loginTs，并且您需要包含对实例的引用（即@ 987654335@)。

【讨论】：

我不确定他们有tsconfig.js
@Keith 我能够将其转译成 .js 并修复脚本标签，但按钮仍然无法运行警报 :( 我的 .ts 代码可能有问题吗？不允许它运行？我没有收到任何错误，并且所有内容都已正确编译。
@ErinB 这不是你需要做的，我已经扩展了问题
谢谢@Keith！我已经能够进行这些更改（并且我也更新了我的问题）我仍然不明白为什么按钮不起作用。我想知道这是否可能是因为构造函数参数？还是有另一个我不明白的语法错误？再次感谢您！

【解决方案2】：

假设您使用 babel 或 TS 将您的 Typescript 编译为 javascript 输出。然后，您应该从

更新您的 HTML

<button onclick="validateInput()">Forgot Password?</button>

到

<button onclick="loginTs.validateInput()">Forgot Password?</button>

您的方法 validateInput 存在于您的类中，因此是一个类方法。您需要在方法调用前加上它所属的类。您在代码中设置的：

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

【讨论】：

我不太清楚你所说的“你需要在你的方法调用前面加上它所属的类。你在代码中设置的那个是什么意思：让 loginTs = new LoginTs("billy", "bronco"); "（但在登录时双重注明。谢谢）