Introduction

Today I am going to explain how to access the input tag element of HTML in TypeScript and how to manipulate it. In this application, we learn how to type-cast and access this element and how to get the value.
STEP 1
  1. Open Visual Studio 2012.
  2. Then click on "File"
  3. Then select "New".
  4. Then select "Project..."
  5. Then select HTML Application with TypeScript.
STEP 2
 After this, a new window is opened and on the right side a Solution Explorer window is opened which contains the .ts file, .js file, .css file, and .html file.

CODING

getelement.ts
  1. class sum {
  2. constructor(public i: number, public j: number) {}
  3. greet() {
  4. return (this.i + this.j)
  5. }
  6. }
  7. var button = document.createElement('button')
  8. button.innerText = "SUM"
  9. button.onclick = function() {
  10. var v = parseFloat(( < HTMLInputElement > document.getElementById("Text1")).value);
  11. var v1 = parseFloat(( < HTMLInputElement > document.getElementById("Text2")).value);
  12. var v2 = new sum(v, v1);
  13. alert(v2.greet().toString())
  14. }
  15. document.body.appendChild(button)
getelementexample.html
  1. <!DOCTYPE html>
  2. <html lang="en"
  3. xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <meta charset="utf-8" />
  6. <title>Get element in TypeScript</title>
  7. <link rel="stylesheet" href="app.css" type="text/css"/>
  8. </head>
  9. <body>
  10. <input id="Text1" type="text" />
  11. <br />
  12. <input id="Text2" type="text" />
  13. <br />
  14. <script src="app.js"></script>
  15. </body>
  16. </html>
get.js
  1. var sum = (function() {
  2. function sum(i, j) {
  3. this.i = i;
  4. this.j = j;
  5. }
  6. sum.prototype.greet = function() {
  7. return (this.i + this.j);
  8. };
  9. return sum;
  10. })();
  11. var button = document.createElement('button');
  12. button.innerText = "SUM";
  13. button.onclick = function() {
  14. var v = parseFloat((document.getElementById("Text1")).value);
  15. var v1 = parseFloat((document.getElementById("Text2")).value);
  16. var v2 = new sum(v, v1);
  17. alert(v2.greet().toString());
  18. };
  19. document.body.appendChild(button);
Output
simple-programe-in-type-script.jpg
Summary
 In this article, I described how to manipulate and access an element of HTML in TypeScript. I hope that this article has helped you to understand this topic.