时间戳

首页 > 解决方案 > Typescript-Button 事件没有被触发

html - Typescript-Button 事件没有被触发

问题描述

嘿伙计们，我刚开始学习打字稿，我尝试在打字稿中编写一个 javascript 示例，但是如果我运行代码并按下按钮，什么也没有发生。

而且我还在寻找我的示例或资源来学习将 typescript 集成到 HTML 中，因为我是 Web 编程新手，但在 java/python 方面有多年经验

打字稿.ts

class Example{

    constructor(){
        let button=document.getElementById("b");
        button.addEventListener("click", (e:Event)=>this.feedTheButton)
    }

    greatestOfTwo=(first:number,second:number):number=>{
        if (first>second){
            return first
        }else{
            return second
        }
    }

    feedTheButton(){
       let first:number = parseInt((<HTMLInputElement>document.getElementById("f")).value);
       let second:number=parseInt((<HTMLInputElement>document.getElementById("d")).value);
       let result:number=this.greatestOfTwo(first,second)
       let place=document.getElementById("write")
       place.innerHTML=result.toString()

    }
}
new Example();

索引.html 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <script type="text/javascript" src="typescript.js"></script>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <p>
            Type a number
            <input type="text" id="f" size="4"> 
            </p>
            <p> Type another number 
                <input type="text" id="s" size="4">
            </p>
        <button id="b" class="myButton" value="click">Get The Larger Number</button>
        <P>The Larger number of the two is: <span id="wrote"></span></P>
    </body>
</html>

标签： htmltypescript

解决方案

直接将this.feedTheButton函数作为参数传递。

class Example{

    constructor(){
        let button=document.getElementById("b");
        button.addEventListener("click", this.feedTheButton.bind(this)) // Directly pass the function as parameter
    }

    greatestOfTwo=(first:number,second:number):number=>{
        if (first>second){
            return first
        }else{
            return second
        }
    }

    feedTheButton(e){
       let first:number = parseInt((<HTMLInputElement>document.getElementById("f")).value);
       let second:number=parseInt((<HTMLInputElement>document.getElementById("s")).value); // Changed this value to 's' because your input id is 's'
       let result:number=this.greatestOfTwo(first,second)
      let place=document.getElementById("wrote")
       place.innerHTML=result.toString()

    }
}
new Example();

你的 html 应该是这样的：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />

        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <p>
            Type a number
            <input type="text" id="f" size="4"> 
            </p>
            <p> Type another number 
                <input type="text" id="s" size="4">
            </p>
        <button id="b" class="myButton" value="click">Get The Larger Number</button>
        <P>The Larger number of the two is: <span id="wrote"></span></P>

<script src="typescript.js"></script>
    </body>
</html>

推荐阅读