Calling a typescript method from your html button onclick event

Question

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.

The `(click)=getTrainingName(1)` syntax hints that you are using Angular for your project. Is that so? And if yes, what version and why don't you use Components? — Spitzbueb, Aug 07 '17 at 10:43
Apologies, I was trying for various options. It should be updated the actual code as well — user3750290, Aug 07 '17 at 11:10
Is `getTrainingName()` even defined in your `AdminTS`, because I just see `alertMessageTS()`. — Spitzbueb, Aug 07 '17 at 11:14

score 36 · Accepted Answer · answered Aug 07 '17 at 11:40

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

score 0 · Answer 2 · answered Aug 17 '22 at 09:45

I wanted this on WindowLoad (not a TS expert by any means)

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Typescript GRPC Client</title>
  </head>
  <body>
   <input type="button" value="Get Result" id="coolbutton"></input>
   <p id="showresulthere">Result will be shown here</p>
   <script src="main.js"></script>
  </body>
</html>

TS file

window.onload = () => {
  console.log('On Page Load');
  let btn = document.getElementById("coolbutton");
  var input = document.getElementById('showresulthere') as HTMLElement | null;
  if (input != null) {
    console.log(input.textContent);
    btn.addEventListener("click", (e: Event) => showResult(input));
  }else{
    console.log("input is null");
  }

 }

function showResult(input: HTMLElement) {

  if (input != null) {
    input.textContent = "Some data";
  } else {
    console.log("input is null");
  }
}

Calling a typescript method from your html button onclick event

2 Answers2

Linked