Register Login
Python Photoshop SAP Java PHP Android C++ Hadoop Oracle Interview Questions Articles Other

How to call a JavaScript function in HTML?

Updated Dec 06, 2022

It is not difficult to call a JavaScript function in HTML using the different ways or methods in JavaScript. Using HTML and JavaScript, web developers can structure a web page with various features and attributes. Also, HTML and CSS can structure a page and provide a web page with an attractive appearance and responsive look. We will get to learn how to use HTML with JavaScript to call the JS function from this article.

What is the need for JavaScript to call a function in HTML?

JavaScript allows developers to give a web page an interactive look for users and guides them to the correct information, while users can use the HTML ad CSS to style and add a good structure to their web page.

Also, users can use JavaScript functions to create websites using HTML that responds to everyday user events like key presses, clicks, page reloads, and mouse hovering. That is why almost every web developer prefers to use HTML and JavaScript and call the JavaScript function in HTML.

There are different ways to create an HTML file and call the JavaScript function in HTML. This article will discuss the below:

Method 1: Using Script Tag

Code Snippet: 

<html>
<head>
<script>
	function myfunc(){
		alert("Hey, here we called the JavaScript function in HTML");
	}
	myfunc();
</script>
</head>

<body>
</body>
</html>

Run Code Snippet

Method 2: Using HTML event attributes like onClick(), onBlur(), onSubmit():

In this method, users first create a button using the input tag. After they make an HTML button, the browser will display the button on the screen, and by clicking the button, users can see a dialog box that pops up on the user's screen that the developer has already declared in the JavaScript function func() with an alert() function.

The clickEvent() function lets them execute the alert() when the button gets clicked by using the onclick() method.

Some on usefull Event Attributes

  • onblur
  • onchange
  • onsubmit
  • onkeydown
  • onclick
  • ondblclick
  • onmouseover

for a complete list of HTML Event Attributes click here

Code Snippet: 

<html>
<head>
<title>How to call a JavaScript function in HTML?</title>
<script>
	function func(){
		alert("Hey, here we called the JavaScript function in HTML");
	}
</script>
</head>

<body>
<p> Click the button below to get a notification from the website and see the action </p>
<input type = "button" onclick = "func()" value = "Display">  
</body>
</html>

Run Code Snippet

Explanation:

In the program mentioned above, we have built a simple HTML document. Within the head section of the HTML document, inside the script tags "<script>...</script>" we have used a user-defined function called the func(). We can build a link or a button and use an onclick() event associated with them to call the "func" function.

We have used the onclick attribute and displayed a button for calling the function. When a user clicks on the given button, the browser executes the function and displays the alert message, as displayed in the output console.

Method 3: Using href attribut of anchor tag

Code Snippet: 

<html>
<head>
<title>How to call a JavaScript function in HTML?</title>
<script>
	function myfunc(){
		alert("Hey, here we called the JavaScript function in HTML");
	}
</script>
</head>

<body>
<p><a href="JavaScript:myfunc()">Click here</a> to call JavaScript function</p>
</body>
</html>

Run Code Snippet

Method 4: Using external files to call a function in HTML:

Here, we use the second method of calling a JavaScript function in HTML. This method involves an external file (.js file), and we call the JS function in HTML through that external file.

To create an external JavaScript file, we need to define our function inside it and save the file with the ".js" extension. Let us understand how it works with an example given below:

Code Snippet: 

<html>
<head>
<title>How to call a JavaScript function in HTML?</title>
<script type = "text/javascript" src = "call-js-function-example-4.js"> </script>
</head>

<body>
<h4> Click here (button) below to call the function </h4>
<input type = "button" onclick = "function_name()" value = "Click Here">
</body>
</html>

External JavaScript File

function function_name() {
  document.write("Hey, here we called the JavaScript function in HTML");
}

Run Code Snippet

Explanation:

In the above code snippet, we first created an external JavaScript file. Inside the file, we defined the function and saved it with a file extension ".js." After creating the JavaScript file, we built a simple HTML document and linked the previous JavaScript file using <script type = "text/javascript" src="jsarticle.js"> </script>.

Since we have saved the HTML document and the JavaScript file inside the same folder, we have to name the JavaScript file in the "src" attribute rather than adding the full path in the head section.

Then we used the <body> tag to display some text using a button. Lastly, we used the onclick attribute with the button to call the JavaScript function, and when a user clicks on the button, the browser invokes the JS function and displays the alert message, as shown in the output console.

Conclusion:

We hope this article has catered to an idea of how to call a JavaScript function in HTML. Also, this article added to some advantages and the need to use HTML with JavaScript for developing web pages. The article briefly explains both these methods mentioned above with the respective code snippets of how we can invoke a function in HTML.

Recommended Posts:
×