Call JavaScript Function From HTML

In this post we are going to have a look at how we can call 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 file, but sometimes you just want to call it directly from the HTML page.

There are a couple of ways we can do this. We can add the function call directly on an HTML element, but we can also embed our JavaScript code into the HTML and listen to certain events, and the call the JS function when that even occurs. We are going to look at both these implementations.

Calling JavaScript function from HTML

There are a lot of different events that we can add on 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. Add JavaScript function to an 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. Adding JavaScript function to 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>

<style>
    #exampleTwo{
        height: 50px;
        background-color: #f18383;
        margin: 20px;
        padding: 10px;
    }

#exampleTwo:hover{
    background-color: #d3b64f;
}
</style>

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

3. Adding JavaScript function to 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");
}

Embedding Event Listener into HTML page

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. Attach a click event listener to an HTML button

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>

<script>
    var button = document.getElementById("exampleFour");

    button.addEventListener("click", function(){
        alert("Button in example four was clicked");
    });
</script>

2. Attach an input event to an input Element

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>

<script>
    var input = document.getElementById("exampleFive");

    input.addEventListener("input", function(){
        alert("I entered input again");
    });
</script>

What method 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.

Last Updated: by Ole Larsen