Looking for a way to get the value of an input element using TypeScript? This article will show you and you can learn how to do it with the documentation below.
How To get the value of an input element using Typescript
Now, let’s follow two steps to get the value of an input element using Typescript.
Step 1: Using document.getElementById() method
Follow the command, document.getElementById() method return type of HTMLElement or null and value property not exist in HTMLElement type. TypeScript only knows that this will return some kind of HTMLElement, but you might know that your page will always have an HTMLCanvasElement with a given ID.
// inputHandle: get HTMLInputElement or null
const inputHandle = document.getElementById("inputEvent") as HTMLInputElement | null;Next, union type will help to define that the variable still returns null. TypeScript’s type system allows you to build new types out of existing ones using various operators. Maybe the served “id” in the HTML element doesn’t exist in DOM.
If you want admission to the inputHandle property of input a value element in an event Listener Handler, type eventTarget as the HTMLInputElement.
Step 2: Using addEventListener() method
let lastTypedOfUser: string;
inputHandle.addEventListener("input", function (event) {
const tag = event.target as HTMLInputElement;
lastTypedOfUser = tag.value.slice(-1);
// show last user typed
console.warn(lastTypedOfUser);
// show all string has typed on a box
console.log(tag.value);
});On this command, When you type something, tag.value returns a string, which it has. For example, if an Article types “LearnShareIT” word, the console.warn() in addEventListener() follows once letter the article is typing, console.log() is showing all string we typed on a box; the IDE has to be capable of assisting you in auto-completing.
Code Example
In the “index.html” file, at <body> tag article uses a box to type a string input.
<!DOCTYPE html>
<html>
<head>
<title>Learn TypeScript on LearnShareIT.com</title>
</head>
<body>
<p>Get the value of an input element using TypeScript</p>
<input id="inputEvent" type="text" name="inputEvent" value="Please input: " />
<script src="./src/index.ts"></script>
</body>
</html>And the “index.ts” file
// Get HTMLElement or null
const inputHandle = document.getElementById("inputEvent") as HTMLInputElement | null;
const inputEvent = inputHandle.value;
console.log(inputEvent); // Output: Please input:
if (inputHandle !== null) {
console.log(inputHandle.value); // Output: Please input:
}
let lastTypedOfUser: string;
// Get the value when the user types something
inputHandle.addEventListener("input", function (event) {
const tag = event.target as HTMLInputElement;
lastTypedOfUser = tag.value.slice(-1);
// show last user typed
console.warn(lastTypedOfUser);
// show all string has typed on a box
console.log(tag.value);
});Summary
That is all the tutorials on how to get the value of an input element using TypeScript. I hope you can know after following this tutorial. If you have a question? Let’s leave a message. We will reply to you as soon as possible. Happy coding.
Maybe you are interested:
- Check if an element contains a class using typescript
- To create an HTML element using TypeScript
- Solutions For Adding Types To Events In React Using TypeScript
Hello, my name is Philip Cabrera. My job is a programmer, and I have 4 years of programming expertise. Follow me if you need assistance with C, C++, JS, TS, or Node.js. I hope my posts are useful to you.
Name of the university: HUMG
Major: IT
Programming Languages: C, C++, JS, TS, Node.js