How To Call A Function In HTML?

In this lesson, you’ll learn how to call JavaScript functions from HTML pages to make them interactive.

HTML and CSS can structure a web page and make it beautiful. JavaScript helps a Web page interact with users and direct them to the information they need.

You can use JavaScript functions to create web sites that respond to common user events, such as clicks, keystrokes, page loading, and mouse hovering.

I’ll cover step-by-step calls to JavaScript functions in HTML to help you understand basic web development concepts with easy-to-use code examples.

Using JS functions with HTML event attributes
You can use event attributes in the HTML control to call a Javascript function when an event occurs.

HTML provides a set of such attributes to cover a wide range of events.

A few common examples are onclick, onchange, onload, onmouseover, onmouseout, and onkeydown.

Please note that HTML event attributes only work with active controls. Buttons and links are a few examples of such controls.

This is probably the easiest approach for calling a JavaScript function from an HTML element.

How to call a JavaScript function with HTML event attributes
Let’s develop a web page that accepts the names of its users. As soon as the user clicks the “Send” button, the website will display a congratulatory message for the user.

We will use the “onclick” HTML event attribute to call a function when the user clicks the button. This function will greet the user with a warning message.

You will need to create an HTML and JavaScript file to try out this example. Let’s create index.html for the HTML source code and scripts.js for the JavaScript source code. We will also use that source code for the following examples with minimal modifications.

HTML source code

You can write or copy the source code below into your index.html. This HTML source code shows a text box and a submit button. Users can enter a name in the text box.

<!DOCTYPE html>
<html lang="en">
<head>

    <title> Calling Function From HTML</title>

</head>
<body>

<label for="fullName">Enter your name:</label>
<input type="text" name="fullName" id="fullName" />

<!-- The onclick event attribute is used to call showAlert() function -->
<button type="submit" onclick="showAlert()"> Submit</button>

<script src="/scripts.js"></script>

</body>
</html>

The above example uses the “onclick” event attribute in the markup for the “Submit” button. The browser calls the “showAlert()” function if the user clicks the “Submit” button.

JavaScript Source Code

Let’s write the source code below in the scripts.js file –

function showAlert()
{
    var name = document.getElementById("fullName").value;
    alert("Hello " +name +"!");
}

This function searches an HTML text field with the identifier “Full Name”. It retrieves the user’s input and uses it to display the message.

Expected results

In action, the web page asks end users to enter the user’s full name. If you enter “John Collins,” the system displays the message “Hi, John Collins!”

Recommended Articles