How to Call a JavaScript Function in HTML

Calling a JavaScript function from HTML is a fundamental skill in web development. This process involves defining JavaScript functions and linking them to HTML elements through event handlers. Below, we'll explore how to define and call JavaScript functions using various methods in HTML.

Defining a JavaScript Function

First, you need to define a JavaScript function. Functions in JavaScript can be defined in the <script> tag within an HTML document or in an external JavaScript file. Here's a simple example of a function that displays an alert:


function showMessage() {
  alert('Hello, this is a message!');
}

This function, named showMessage, will display an alert with a message when called.

Calling Functions with Inline Event Handlers

You can call JavaScript functions directly from HTML elements using inline event handlers. For example, you can attach a function to a button click event:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Call JavaScript Function</title>
  <script>
    function showMessage() {
      alert('Hello, this is a message!');
    }
  </script>
</head>
<body>
  <button onclick="showMessage()">Click Me</button>
</body>
</html>

In this example:

The onclick attribute is used to call the showMessage function when the button is clicked.

Calling Functions with Event Listeners

Another method to call JavaScript functions is by using event listeners. This approach is often preferred for better separation of HTML and JavaScript:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Call JavaScript Function</title>
  <script>
    function showMessage() {
      alert('Hello, this is a message!');
    }

    document.addEventListener('DOMContentLoaded', function() {
      document.getElementById('myButton').addEventListener('click', showMessage);
    });
  </script>
</head>
<body>
  <button id="myButton">Click Me</button>
</body>
</html>

In this example:

The JavaScript function showMessage is added as an event listener for the button's click event using addEventListener.
The DOMContentLoaded event ensures that the event listener is attached after the HTML document has been fully loaded.

Calling Functions from External JavaScript Files

You can also define JavaScript functions in an external file and call them from your HTML document. This method helps in keeping the JavaScript code separate from HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Call JavaScript Function</title>
  <script src="script.js" defer></script>
</head>
<body>
  <button onclick="showMessage()">Click Me</button>
</body>
</html>


// script.js file content
function showMessage() {
  alert('Hello, this is a message!');
}

In this example:

The JavaScript function is defined in an external file script.js.
The script tag with the src attribute is used to include the external JavaScript file.
The defer attribute ensures that the script is executed after the HTML document is fully parsed.

Conclusion

Calling JavaScript functions from HTML can be done in various ways, including inline event handlers, event listeners, and external JavaScript files. Each method has its use cases, and choosing the right approach can help you maintain clean and organized code. Understanding these methods will enhance your ability to create interactive and dynamic web pages.