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
– Spitzbueb, Commented Aug 7, 2017 at 10:43
Apologies, I was trying for various options. It should be <input type="button" value="Click" onclick="getTrainingName(1)"> updated the actual code as well — user3750290
– user3750290, Commented Aug 7, 2017 at 11:10
Is getTrainingName() even defined in your AdminTS, because I just see alertMessageTS(). — Spitzbueb
– Spitzbueb, Commented Aug 7, 2017 at 11:14

Kokodoko · Accepted Answer · 2017-08-07 11:40:03Z

37

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

answered Aug 7, 2017 at 11:40

Kokodoko

28.3k37 gold badges132 silver badges208 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Alex Punnen · Accepted Answer · 2022-08-17 09:45:46Z

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

Collectives™ on Stack Overflow

Calling a typescript method from your html button onclick event

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related