How to Call JavaScript Function From HTML

Table of Contents

You can call a JavaScript function from HTML by adding the function call directly on the HTML element or by embedding the JS code into the the HTML page.

TL;DR: Here is a code snippet to call a JS function from HTML. Full examples in post.

<button onclick="htmlFunctionOne">I have a function on me</button>

In this post we will explore both ways of calling a JS function from HTML. As you might know, it is best to put your JavaScript code in its separate document and import that document in the header section, but sometimes you just want to call it directly from the HTML page.

HTML Call JavaScript Function

There are a lot of different events that we can add onto HTML elements in order to call functions from HTML. Here we will look at some of the most popular ones, and we will also look at how we can use listeners instead of adding the events directly to the elements.

1. Call JavaScript Function From HTML Button

Perhaps the most common use case when inserting the function call directly in HTML is to add it to a button. It is quite straight forward to do it.

I have embedded the code example below onto the page here so that you can try it out.

<button onclick="htmlFunctionOne">I have a function on me</button>

function htmlFunctionOne(){
    alert("The button was clicked");

You can use the click function on pretty much any element on the page. Lets see it in action with something else than a button.

2. Calling JavaScript function from a div Element

Like the example above, here we are going to add a click event directly onto the HTML element. This functions the same way, but I want to illustrate that you can add the click event on other things than a button which would be the normal thing to click.

I will also add a little styling to the div element to make it more presentable. I have added all the code including the styling in the box below. I have also embedded the box just below so that you can try it out. The styling tags are used for embedding the style directly into the page and not a separate style sheet.

I am a div element
<div id="exampleTwo" onclick="htmlFunctionTwo()">I am a div element</div>

        height: 50px;
        background-color: #f18383;
        margin: 20px;
        padding: 10px;

    background-color: #d3b64f;

function htmlFunctionTwo(){
    alert("The div was clicked");

3. Calling JavaScript function from an input Element

There is another interesting event that we cal call from HTML is the input event. We can add this to an input element and call a function event time we enter something. You can for example use this to make all the letters capitalized as you type them.

For our example we just alert that some input was provided. Each time you type something into the box below there will be an alert notifying you that the event has been fired.

<input id="exampleThree" oninput="htmlFunctionThree()" placeholder="Enter text" />

function htmlFunctionThree(){
    alert("Provided input");

Calling JS Function from HTML Using Events

The other way to call JavaScript functions from HTML is to add listeners inside script tags. This is how I get the functions to be called on this page. I embedded the JS functionality inside <script> </script>. Lets go over a couple of examples of how we can achieve the same button click event and input event but without adding the code directly onto the element.

1. Call JS Function from Button using Event

Lets start with perhaps the most common use case. You would do this the same way if you had your JS in a separate file as well, but we are going to embed this inside of <script> </script> and include it in the HTML page itself.

<button id="exampleFour">I am a button</button>

    var button = document.getElementById("exampleFour");

    button.addEventListener("click", function(){
        alert("Button in example four was clicked");

2. Call JS function from input element Using Event

Just like how we added the input event directly onto the input element, so can we listen of inputs to a specific input element and call our function then.

<input id="exampleFive" placeholder="enter text"></input>

    var input = document.getElementById("exampleFive");

    input.addEventListener("input", function(){
        alert("I entered input again");

What Method of Calling JS Function from HTML is Best?

Each method of calling a JavaScript function from a HTML file have their merits. The inline events have their place, but if I was to chose between the two methods I would pick adding listeners inside of script tags. The reason for this is that you can keep your JavaScript in a single place, instead of having it spread around the HTML file.

One place where having inline events would be a better option would be if you are generating the page on the server using something like Razor. It is then easier to add just the function call to the HTML element instaead of adding listeners.

These things are of course assuming you are not adding a separate JS file, which would be the preferred way of calling functions.

If you want to read more about JavaScript then you should check out this guide on how to return multiple values, and this post on how to get the current URL.

Related Guides