Post
Ask Question

Access an Element in Type Script

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. 


Similar Articles