Numerous methods exist for invoking a JavaScript function within an HTML document, and accomplishing this task is straightforward. Initially, we have opted for one of the simplest approaches to invoking a JavaScript function in an HTML document:
In this approach, we will establish and specify a function within the head section of an HTML document. To trigger this function within the HTML document, it is necessary to generate a basic button. By incorporating the onclick event attribute, which serves as an event handler, the function can be executed upon clicking the button.
In order to gain a better understanding, let's examine the provided program:
Program
<html>
<head>
<script type = "text/javascript">
functionmyfunction() {
alert("how are you");
}
</script>
</head>
<body>
<p>Click the following button to see the function in action</p>
<input type = "button" onclick = "myfunction()" value = "Display">
</body>
</html>
Explanation of program
In the provided code snippet, a basic HTML file has been generated. Within the header segment of this HTML file, a function (for example, myfunction;) has been declared within the script elements <script>...</script>.
<html>
<head>
<script type = "text/javascript">
function myfunction() {
alert("how are you");
}
</script>
In contrast, within the body segment, text was presented alongside a button creation. The function was invoked by utilizing the onclick attribute in conjunction with the button. Upon the user clicking the button, the function is triggered, resulting in the display of an alert message, as demonstrated in the output.
<body>
<p>Click the following button to see the function in action</p>
<input type = "button" onclick = "myfunction()" value = "Display">
</body>
Output
Calling a function using external JavaScript file
JavaScript functions can be invoked using an external JavaScript file linked to our HTML file. The initial step involves creating a JavaScript file, where we define our functions, and saving it with a (.Js) file extension.
After the completion of the JavaScript file, the next step involves the development of a basic HTML file. To integrate our JavaScript file into the HTML document, we must utilize the script tag <script type = "text/javascript" src = "https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image"> and specify the file's location in the "src" attribute. Once the external JavaScript file is connected to the HTML file, we can generate a button and execute the function by associating it with the "onclick" attribute.
Let's understand it with help of a program:
Program
<html>
<head>
<script type = "text/javascript" src="https://placehold.co/400x300/3498db/ffffff?text=Sample+Image"></script>
</head>
<body>
<p>Click the following button to see the function in action</p>
<input type = "button" onclick = "myfunction()" value = "Display">
</body>
</html>
Explanation of program
The program starts by creating a JavaScript file where a function is defined and saved with the .js extension.
Function.js
functionmyfunction()
{
document.write("welcome to C# Tutorial");
}
Upon the completion of the creation of the JavaScript file, an HTML document was generated, and the JavaScript file was connected by utilizing <script type = "text/javascript" src="https://placehold.co/400x300/3498db/ffffff?text=Sample+Image"></script>. Given that both the HTML document and JavaScript file are located in the identical directory, solely the name of the JavaScript file was specified within the "scr" attribute, as opposed to including the complete path within the head section.
<head>
<script type = "text/javascript" src="https://placehold.co/800x600/3498db/ffffff?text=Sample+Image"></script>
</head>
In the content area, text was presented along with a button creation. The invocation of our function was achieved by incorporating the onclick attribute with the button. Upon clicking the button, our function is triggered, resulting in the presentation of an alert message, as demonstrated in the output.
<body>
<p>Click the following button to see the function in action</p>
<input type = "button" onclick = "myfunction()" value = "Display">
</body>
Output
Now click on the given button: