Calling a typescript method from your html button onclick event

user3750290

I am new to typescript. I have a query on how to call a method inside a .ts file from your .html page when u click a html button

.ts file

class AdminTS {
    public alertMessageTS() {
        alert("This is the test call!!!.");
    }
}

.html page

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>
        Sample TypeScript page
    </title>
    <script src="AdminTS.js"></script>
</head>
<body>
    <input type="button" value="Click" onclick ="getTrainingName(1)">
    </input>
</body>
</html>

I am getting a runtime exception saying getTrainingName is undefined.

Kokodoko

getTrainingName() is never defined in your example code, perhaps you forgot to add that part?

I would suggest not using javascript at all in your html, instead use addEVentListener to add handlers to dom elements. Then all your application logic will be in *.ts files.

(Since you already work with typescript it makes even less sense to add inline js in html)

.html file

<input type="button" value="Click" id="coolbutton"></input>

.ts file

class AdminTS {
  constructor() {
    let btn = document.getElementById("coolbutton");
    btn.addEventListener("click", (e:Event) => this.getTrainingName(4));
  }
  getTrainingName(n:number){
     // button click handler
  }
}

// start the app
new AdminTS();

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

From Dev

ReactJS Button not calling the onClick event

From Dev

Calling a method on OnClick using TypeScript

From Dev

Calling Server side event from html button control Not Working

From Dev

Cordova: onclick event is calling before button click

From Dev

onClick event is sending me to the correct method but from inside that method, it is not calling the inner component and it is lost

From Dev

ASP:Button tag is onclick method is not calling

From Dev

Drag and Drop into Shopping Cart by simply calling the already programmed onClick event from the Button

From Dev

Javascript + HTML: Button Not Calling on Function Onclick

From Dev

Auto running jQuery method & Calling jQuery method from onClick attribute in HTML

From Dev

Unity, Calling a IEnumerator function from Button onClick

From Dev

HTML 5 pattern not working for onclick event of button

From Dev

Trouble Integrating JavaScript into HTML with button onClick event

From Dev

Handle onclick event of Html Button inside ListView

From Dev

Calling a function from a HTML button

From Dev

Calling id of button to javascript file after onclick event

From Dev

Calling Typescript function from Highcharts load event

From Dev

calling function from programmatically created button event

From Dev

Exclude Button From Event Listener OnClick

From

HTML button calling an MVC Controller and Action method

From Dev

HTML button onClick listener calling HTML form onSubmit javascript function

From Dev

Calling an Event or Method on a View from a ViewModel

From Dev

Will adding onclick in HTML and calling from Javascript conflict?

From Dev

Typescript `super` calling from overridden method

From Dev

Creating a Custom Button in React Typescript and add onClick Event

From Dev

React Typescript fire onClick button event using .bind

From Dev

How to add a class method as an event to a html button

From Dev

html: Accessing a mouse event from onclick attribute

From Dev

onClick function not calling a method

From Dev

Calling function from HTML to typescript not waited to finish

Related Related

  1. 1

    ReactJS Button not calling the onClick event

  2. 2

    Calling a method on OnClick using TypeScript

  3. 3

    Calling Server side event from html button control Not Working

  4. 4

    Cordova: onclick event is calling before button click

  5. 5

    onClick event is sending me to the correct method but from inside that method, it is not calling the inner component and it is lost

  6. 6

    ASP:Button tag is onclick method is not calling

  7. 7

    Drag and Drop into Shopping Cart by simply calling the already programmed onClick event from the Button

  8. 8

    Javascript + HTML: Button Not Calling on Function Onclick

  9. 9

    Auto running jQuery method & Calling jQuery method from onClick attribute in HTML

  10. 10

    Unity, Calling a IEnumerator function from Button onClick

  11. 11

    HTML 5 pattern not working for onclick event of button

  12. 12

    Trouble Integrating JavaScript into HTML with button onClick event

  13. 13

    Handle onclick event of Html Button inside ListView

  14. 14

    Calling a function from a HTML button

  15. 15

    Calling id of button to javascript file after onclick event

  16. 16

    Calling Typescript function from Highcharts load event

  17. 17

    calling function from programmatically created button event

  18. 18

    Exclude Button From Event Listener OnClick

  19. 19

    HTML button calling an MVC Controller and Action method

  20. 20

    HTML button onClick listener calling HTML form onSubmit javascript function

  21. 21

    Calling an Event or Method on a View from a ViewModel

  22. 22

    Will adding onclick in HTML and calling from Javascript conflict?

  23. 23

    Typescript `super` calling from overridden method

  24. 24

    Creating a Custom Button in React Typescript and add onClick Event

  25. 25

    React Typescript fire onClick button event using .bind

  26. 26

    How to add a class method as an event to a html button

  27. 27

    html: Accessing a mouse event from onclick attribute

  28. 28

    onClick function not calling a method

  29. 29

    Calling function from HTML to typescript not waited to finish

HotTag

Archive