There are many ways to call a JavaScript function in the HTML document, and it is also not a difficult task. First, we have used one of the easiest ways to call a JavaScript function in HTML document:
In this method, we will create and define a function in the HTML document's head section. To invoke this function in the html document, we have to create a simple button and using the title event attribute [which is an event handler] along with it, we can call the function by clicking on the button.
To understand it more clearly let's see the given program:
Program
Explanation of program
In the above-given program, we have created a simple HTML document. Inside the head section of the HTML document, we have defined a function [e.g myfunction[];] inside the script tags ....
On the other hand, inside the body section, we displayed some text and created a button. To call our function, we have used the title attribute along with the button and when the user clicks on that button our function gets executes and display an alert message, as you can see in the output.
Output
Calling a function using external JavaScript file
We can also call JavaScript functions using an external JavaScript file attached to our HTML document. To do this, first we have to create a JavaScript file and define our function in it and save itwith [.Js] extension.
Once the JavaScript file is created, we need to create a simple HTML document. To include our JavaScript file in the HTML document, we have to use the script tag and in the "src" attribute we have to provide the path to our JavaScript file where it is stored. After linking the external JavaScript file to the HTML document, we can create a button and call the function using the " title" attribute with it.
Let's understand it with help of a program:
Program
Explanation of program
In the above program first, we have created a JavaScript file and defined our function in it and saved it with the .js extension.
Function.js
After creating the JavaScript file, we have created an HTML document and linked our JavaScript file using . Because we have stored our HTML document and JavaScript file in the same folder, we have just named our JavaScript file in the "scr" attribute instead of providing the full path in the head section.
Inside the body section, we displayed some text and created a button. To call our function, we have used the title attribute along with the button and when the user clicks on that button our function gets executes and display an alert message, as you can see in the output.
Output
Now click on the given button:
If we want to call the JavaScript function in the Html then we have to follow the steps which are given below. Using these steps, we can easily access the JavaScript function.
Step 1: Firstly, we have to type the script tag between the starting and closing of tag just after the title tag. And then, type the JavaScript function.
Step 2: After then, we have to call the javaScript function in the Html code for displaying the information or data on the web page. So, we can call the function of JavaScript by its name in the input tag of the form tag.
Step 3: And, at last, we have to save the Html file and then run the file which calls the JavaScript function.
Test it NowThe output of above Html code is shown in the following screenshot:
JavaScript is emerging day by day and is used efficiently in web pages. Whenever JavaScript is called into an HTML page, it interacts dynamically on web pages. JavaScript makes web pages more intuitive and enhances user experience as compared to static pages. Calling functions of JavaScript into an HTML page is not a complex task. In this article, we demonstrate various ways of calling JavaScript functions in HTML. The first
method is to call the JavaScript function in HTML. For this, you have to create a function then define this function either in the head section or body section of the HTML document. You can either create a link or a button and then an title[] event is associated with them in order to call this function. Now we are going to demonstrate a simple example. This example contains a simple HTML file in which we have defined a method functionName[] within script tags in the head of the HTML as
shown below. function functionName[] { alert["You
are learning how to call JavaScript function in html"]; } Furthermore, we created a button and associated the title[] event with it as shown below. Subsequently, whenever the user clicks on the button the function gets invoked: Hey, click on the button below to invoke the function Example
function functionName[] {
alert["You are learning how to call JavaScript function in html"];
}
Hey, click on the button below to invoke the function
Output
Call JavaScript function through external files
The second method is to call a JavaScript function in HTML through external .js files. External files of JavaScript are attached in the head section of the HTML file. First of all, you need to create two files i.e. .html file in which HTML code is written and the other is .js in which functions are defined.
We have to create an HTML document once we are done with the creation of JavaScript. After incorporating the JavaScript file we have to either create a link or a button, then invoke the function defined in the JavaScript file.
Example
This example contains a simple HTML file “articl.html” in which we link the external JavaScript file “jsarticle.js”.
articl.html
Hey, click on the button below to invoke the function
Jsarticle.js
function functionName[] {
document.write["You are learning how to call JavaScript function in html"];
}
Html and JavaScript files should be either saved in the same folder and if not then we have to provide a full path in the script tags present in the head section. In our provided example we have saved the HTML and JavaScript files in the same folder that is why we have provided the name of the JavaScript file instead of providing the full path.
We have created a button in the body section and besides that button, we have also used the title event to call a function. Now, whenever the user clicks on that button the function will be invoked which is defined in the javascript file as shown in the below-mentioned picture.
Hey, click on the button below to invoke the function
Output
Conclusion
In this article, we demonstrate how to call JavaScript functions within HTML. We have also discussed two methods. In the first method, we are including a JavaScript file within an HTML document. In the second method, we are calling JavaScript through external files. Both these methods have been briefly explained along with examples of how JavaScript functions can be invoked in HTML.
About the author
A Javascript Developer & Linux enthusiast with 4 years of industrial experience and proven know-how to combine creative and usability viewpoints resulting in world-class web applications. I have experience working with Vue, React & Node.js & currently working on article writing and video creation.