This article will show how we can pass an HTML element to a function using jQuery and TypeScript together. There are different ways available in which we can pass an element to a function using TypeScript and jQuery as listed below.
Before moving on to the implementation, make sure that you have jQuery installed in your project environment. Use the below commands to install and use jQuery.
npm commands to install jQuery:
npm install jquery
npm install --save-dev @types/jquery
Once jQuery gets installed in your project use the below command to import and use it in your TypeScript file.
import variable_name_by_which_you_want_to_import_jQuery from 'jquery'Table of Content
Using HTMLElement as the passing element type
In this approach, we will assign the HTMLElement type to the parameter while declaring the function and then use it as an element inside that function.
Syntax:
function funcName(paramName: HTMLElement){
// Function statements
}
funcName(selectedElement[0]);
Example: The below code example passes the element as an HTMLElement type to the function and uses it as an element inside it.
// index.ts fileimport $ from "jquery";
declare var global: any;
global.jQuery = $;import "jquery-ui";
const changeText = (passedElement: HTMLElement) => { $(passedElement).text(`
The text has been changed by passingelement to function using the TypeScript
and jQuery. `);
}$('#btn').on('click', function () {
const selectedElement = $('#result')[0];
changeText(selectedElement);
}) |
<!-- index.html file --><!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport"
content="width=device-width,
initial-scale=1.0" />
<title>Document</title>
<style>
.h1 {
font-size: 30px;
color: green;
}
#result {
color: #FF671F;
}
</style>
</head>
<body>
<center>
<h1 class="h1">
GeeksforGeeks
</h1>
<h3 id="result">
Click the below button
to change the this text.
</h3>
<button id="btn">
Change Text
</button>
</center>
</body>
</html>
|
Output:
Using any as the passing element type
In this approach, we will use the any type to declare the element parameter inside the function declaration and use it as an element inside that function.
Syntax:
function funcName(paramName: any){
// Function Statements
}
funcName(selectedElement[0]);
Example: The below example uses the any type for the passing element parameter.
// index.ts fileimport $ from "jquery";
declare var global: any;
global.jQuery = $;import "jquery-ui";
const changeText = (passedElement: any) => { $(passedElement).text(`
The text has been changed by passing
element to function using the TypeScript
and jQuery.
`);
}$('#btn').on('click', function () {
const selectedElement = $('#result')[0];
changeText(selectedElement);
}) |
<!-- index.html file --><!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport"
content="width=device-width,
initial-scale=1.0" />
<title>Document</title>
<style>
.h1 {
font-size: 30px;
color: green;
}
#result {
color: #FF671F;
}
</style>
</head>
<body>
<center>
<h1 class="h1">
GeeksforGeeks
</h1>
<h3 id="result">
Click the below button
to change the this text.
</h3>
<button id="btn">
Change Text
</button>
</center>
</body>
</html>
|
Output:
Using JQuery as the passing element type
In this method, the JQuery will be assigned as the element type of the parameter at the time of function declaration and the element will be directly selected and passed to the function without specifying the first array item.
Syntax:
function funcName(paramName: JQuery){
// Function Statement
}
funcName(selectedElement);
Example: The below code example helps you understand the use of JQuery type to pass an element to the function.
// index.ts fileimport $ from "jquery";
declare var global: any;
global.jQuery = $;import "jquery-ui";
const changeText = (passedElement: JQuery) => { $(passedElement).text(`
The text has been changed by passing
element to function using the TypeScript
and jQuery.
`);
}$('#btn').on('click', function () {
const selectedElement = $('#result');
changeText(selectedElement);
}) |
<!-- index.html file --><!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport"
content="width=device-width,
initial-scale=1.0" />
<title>Document</title>
<style>
.h1 {
font-size: 30px;
color: green;
}
#result {
color: #FF671F;
}
</style>
</head>
<body>
<center>
<h1 class="h1">
GeeksforGeeks
</h1>
<h3 id="result">
Click the below button
to change the this text.
</h3>
<button id="btn">
Change Text
</button>
</center>
</body>
</html>
|
Output: