Modern web applications are based on the interaction between HTML and JavaScript. HTML defines the page’s structure, while JavaScript provides interactivity and dynamic behavior to the content.
One of the main tasks of frontend developers is to call JavaScript functions from HTML to respond to user actions such as clicks, hovers, and loads. Understanding the interaction between HTML and JavaScript is important for building responsive, interactive interfaces that respond consistently and reliably across devices and browsers.
Overview
Ways to Call JavaScript Functions in HTML
- Using HTML Event Attributes
- Invoking Functions on Page Load
- Employing Event Listeners
- Calling Functions from Anchor Tags
- Utilizing External JavaScript Files
This article explores different ways to call JavaScript functions from HTML, provides code examples, and helps in understanding the best practices.
What is a JavaScript Function?
A JavaScript function is simply a collection of code statements that are written to accomplish a specific task. Since functions are reusable, they can be executed (or called) multiple times, in different locations in a web application.
Basic Syntax:
function functionName(parameter1, parameter2, ...) {
// Code to be executed
}Example :
function greetUser() {
alert("Welcome to BStackDemo!");
}Once defined, the function can be invoked either directly in the script or through interactions using HTML.
Read More: Unit Testing in JavaScript
Ways to Call JavaScript Functions in HTML
JavaScript functions can be invoked in many different ways from HTML. Each approach is suitable for different situations depending on the design and interactivity objectives of the web application.
Using HTML Event Attributes
The simplest way to use an HTML element to call a JavaScript function is using event attributes like onclick, onmouseover, or onchange.
Note: Write the code in notepad, save it as a ‘.html’ file and double click on it to execute the script.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Event Attributes</title>
<script>
function addToCart() {
alert("Item added to cart!");
}
function highlightButton() {
document.getElementById("hoverBtn").style.backgroundColor = "#90ee90"; // light green color
}
function updateSelection() {
const selectedValue = document.getElementById("productSelect").value;
alert("You selected: " + selectedValue);
}
</script>
</head>
<body>
<!-- onclick event -->
<button onclick="addToCart()">Add to Cart</button>
<br><br>
<!-- onmouseover event -->
<button id="hoverBtn" onmouseover="highlightButton()">Hover On This</button>
<br><br>
<!-- onchange event -->
<label for="productSelect">Choose a product:</label>
<select id="productSelect" onchange="updateSelection()">
<option value="">--Select--</option>
<option value="Laptop">Laptop</option>
<option value="Phone">Phone</option>
<option value="Tablet">Tablet</option>
</select>
</body>
</html>Output:
Invoking Functions on Page Load
Using the onload attribute in the <body> tag, functions can be run automatically when a page has finished loading.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Invoke Functions on Page Load</title>
<script>
function showWelcomeMessage() {
alert("Welcome! The page has fully loaded.");
}
</script>
</head>
<body onload="showWelcomeMessage()">
<h1>Welcome to BStackDemo</h1>
</body>
</html>Output:
Employing Event Listeners
Code separation and maintainability are enhanced when functions are bound to events using JavaScript. This approach is often used during present-day web development.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Employ Event Listeners</title>
<script>
function showProductDetails() {
alert("Product details are displayed.");
}
window.onload = function () {
document.getElementById("viewDetails").addEventListener("click", showProductDetails);
};
</script>
</head>
<body>
<button id="viewDetails">View Details</button>
</body>
</html>Output:
Calling Functions from Anchor Tags
The href=”javascript:…” syntax allows anchor (<a>) tags to call JavaScript functions directly. Although it is not advised for production, it can be useful for prototypes.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Anchor Tags</title>
<a href="javascript:alert('This is a demo alert')">Click Me</a>
</head>
</html>Output:
Alternatively, the anchor can also call a defined function:
Example:
<!DOCTYPE html>
<html>
<head>
<title>Anchor Tags</title>
<script>
function notifyUser() {
alert("Link clicked!");
}
</script>
<a href="javascript:notifyUser()">Click the Link</a>
</head>
</html>Output:
Utilizing External JavaScript Files
JavaScript functions should preferably be linked to HTML documents and stored in external.js files for improved code quality and flexibility.
Example:
HTML File:
<!DOCTYPE html> <html> <head> <title>External JavaScript File</title> <script src="scripts.js"></script> </head> <body> <button onclick="checkout()">Checkout</button> </body> </html>
JavaScript File:
function checkout() {
alert("Proceeding to checkout...");
}Output:
Best Practices for Calling a JavaScript Function from HTML
Given below are the best ways to use HTML to call a JavaScript function.
- To improve maintainability and separation of concerns, use addEventListener() instead of inline event handlers.
- Maintaining logic in external scripts supports reusable components and increases scalability.
- Use meaningful function names that describe the action to be performed.
- Avoid using JavaScript in anchor tags. It is not SEO-friendly and is out of date.
- Make use of discrete JavaScript by letting JavaScript handle behavior, CSS manage styling, and HTML handle structure.
- Verify that all interactions function properly on different devices and web browsers.
Conclusion
Building interactive web pages requires calling a JavaScript function from HTML. Depending on the size of the project, performance objectives, and maintainability, the best strategy could involve creating basic HTML attributes, adding event listeners in JavaScript, or loading functions externally.
Real device cloud testing is essential because functional behavior can differ depending on the environment.
A smooth user experience, accuracy, and the detection of edge-case issues are all ensured by testing on actual devices. To ensure that JavaScript interactions, such as button clicks, page loads, and dynamic content updates, function as intended, developers can access automated Selenium testing across various browsers and devices through BrowserStack Automate.
Integrating dependable cross-browser testing with BrowserStack Automate and reliable JavaScript approaches will allow the development teams to release interactive, error-free applications confidently.
Featured Article
