How to Call a JavaScript Function in HTML

Once you have a good grasp of HTML and CSS, the next step is JavaScript to take your web projects to the next level. JavaScript adds interactive and dynamic features to web pages — it’s what makes them interesting and engaging beyond just static content.

If you want to make an interactive page, one of the fundamental skills you need to know is how to call JavaScript functions from your HTML document. In other words, when a user engages with an HTML element in some way (like clicking it), how can you trigger a JavaScript function in response?

Fortunately, HTML and JavaScript make this easy. In this post, you’ll learn three methods to call a JavaScript function with HTML. Let’s dive in.

How to Call a JavaScript Function in HTML

In this section, we’ll go over three ways to call a function with HTML

• with script tags
• with an external JavaScript file
• with event listeners

Use Script Tags

The simplest way to call a JavaScript function in an HTML document is to define the function inside a pair of <script> tags, then place it inside either the head or body of the HTML document. You can then call this function when a user interacts with a page element.

In the example below, we’ll create a function in the head section of the document that changes the color of a div from orange to green. We’ll add a button element with an onclick event. When a user clicks the button, the function is called.

See the Pen call function in js: event listener by HubSpot (@hubspot) on CodePen.

This function will work the same if we define it inside the body section.

See the Pen call function in js: script tags 2 by HubSpot (@hubspot) on CodePen.

We can use other events to call the function as well. For instance, we can call the function when the user hovers their cursor over the div with the onmouseover event.

See the Pen call function in js: script tags 3 by HubSpot (@hubspot) on CodePen.

Use an External JavaScript file

While placing HTML and JavaScript in the same file is easy, most developers prefer to place their JavaScript code in a separate file. Separating HTML and JavaScript in this way makes the code easier to understand and maintain. It keeps everything more organized.

It’s easy to call a JavaScript function in an external JavaScript file. We just need to add a bit of extra code.

In this next example, we’ll use the same div example from above. First, we’ll create our external JavaScript file with the function that changes the div color. We’ll call this file functions.js. You can title the file whatever you want, as long as it ends with the .js extension.

Next, we’ll make our HTML document. This time, we’ll link to the functions.js file in the head section with a <script> tag. Within the <script> tag, the src attribute is assigned the file path of the functions.js file. If the HTML document and JavaScript document are saved in the same directory, you only need to provide the JavaScript file name as the value for src.

Now, when the browser encounters the function call changeColor() in the HTML document, it will know that changeColor() is a function inside functions.js.

Here’s what the HTML looks like:

And here’s what the HTML and JavaScript code look like in action:

See the Pen call function in js: external js by HubSpot (@hubspot) on CodePen.

Use Event Listeners

The final and most powerful way to call JavaScript functions with HTML is with event listeners. In JavaScript, an event listener is a feature that waits for an event (such as a mouse click) to occur on an element or set of elements. Once that event occurs, the event listener calls a function.

To create an event listener in JavaScript, you use the built-in addEventListener() function. This function adds an event listener to an HTML element, class, or id. The addEventListener() function takes two required parameters:

• event: This triggers the listener, like click or mouseover.
• listener: This is JavaScript function that is called when the event occurs. You can add multiple listeners if desired.

In the example below, we’ve set up an event listener for a click event. When the button is clicked, the event listener calls changeColor().

See the Pen call function in js: event listener by HubSpot (@hubspot) on CodePen.

Event listeners are ideal for triggering JavaScript functions with user input because they remove the need to include JavaScript functioncalls (i.e., onclick) from your HTML, making code easier to maintain. Plus, you can call multiple functions from a single event.

Call JavaScript functions with HTML.

At it’s core, HTML is responsible for the content of the page alone. Without JavaScript, users won’t be able to do much interaction with your web page.

However, by mastering the techniques we’ve covered in this post, you can immediately increase on-page engagement. Experiment with these different techniques, and see which works best for your project and coding style.