Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to call a JavaScript function in HTML?
In this article, we will explore how to call and initialize JavaScript functions from HTML templates. JavaScript functions allow us to execute desired operations and respond to user interactions on web pages.
There are several ways to call JavaScript functions in HTML. We'll discuss the most common approaches with practical examples.
Using Event Handlers (onclick)
The most common way to call JavaScript functions is through event handlers like onclick. When a user interacts with HTML elements (buttons, links, etc.), the associated JavaScript function executes.
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Function Call Example</title>
</head>
<body>
<h1 style="color: green;">Welcome To Tutorials Point</h1>
<input type="button" onclick="clickEvent();" value="Click Here!" />
<script>
function clickEvent() {
alert("Hey... The Javascript function is invoked.");
}
</script>
</body>
</html>
When you click the button, it triggers the clickEvent() function, which displays an alert dialog with the specified message.
Calling Functions Directly in Script Tags
JavaScript functions can also be called directly when the page loads, without requiring user interaction. This approach is useful for initialization tasks or dynamically generating content.
<!DOCTYPE html>
<html>
<head>
<title>Direct Function Call</title>
</head>
<body>
<script>
function display() {
document.write("<h1 style='color:green;'>Welcome to Tutorials Point</h1>");
document.write("<h3>Writing this text from Javascript</h3>");
}
// Function called directly
display();
</script>
</body>
</html>
The display() function executes immediately when the browser encounters it, writing HTML content directly to the document.
Using DOM Events
Modern JavaScript practices recommend using addEventListener() for better event handling and separation of HTML and JavaScript code.
<!DOCTYPE html>
<html>
<head>
<title>DOM Event Example</title>
</head>
<body>
<h1>DOM Event Handler Example</h1>
<button id="myButton">Click Me!</button>
<p id="output"></p>
<script>
function handleClick() {
document.getElementById("output").innerHTML = "Button clicked using addEventListener!";
}
// Add event listener when DOM is loaded
document.getElementById("myButton").addEventListener("click", handleClick);
</script>
</body>
</html>
Function Call Methods Comparison
| Method | When to Use | Best Practice |
|---|---|---|
| onclick attribute | Simple interactions | Good for learning |
| Direct function call | Page initialization | Yes for setup tasks |
| addEventListener() | Complex applications | Recommended approach |
Key Points
- JavaScript functions in HTML can be triggered by user events or called directly
- The
onclickattribute provides a simple way to handle button clicks - Functions called directly execute when the browser processes the script
- Modern development favors
addEventListener()for better code organization - Always place scripts before the closing
</body>tag or use event listeners for DOM-ready events
Conclusion
JavaScript functions can be called in HTML using event handlers, direct invocation, or DOM event listeners. Choose the method that best fits your project's complexity and maintainability requirements.
2K+ Views
