How to Call a JavaScript Function in HTML

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.