How do I call a JavaScript function on page load?

Front End TechnologyJavascriptWeb Development

This tutorial will teach us to call a JavaScript function on page load. In many cases, while programming with HTML and JavaScript, programmers need to call a function, while loading the web page or after the web page load finishes. For example, programmers need to show the welcome message to the user on page load, and the programmer needs to call a JavaScript function after the page load event.

There are various ways to call a function on page load or after page load in JavaScript, and we will look at them one by one in this tutorial.

  • Using the onload event in the <body> tag

  • Using the window.onload Event

  • Using the DOMContentloaded Event

Using the onload event in the <body> tag

The first approach for calling a function on the page load is the use an onload event inside the HTML <body> tag. As you know, the HTML body contains the entire content of the web page, and when all HTML body loads on the web browser, it will call the function from the JavaScript.

Syntax

Follow the below syntax to use onload event in the <body> tag.

<body onload = "functionToCall()" >
// HTML content
</body>

Example

In the below example, we have created the JavaScript function named welcomeFunction(). We are calling that function from the <body> tag using the onload event, and it shows the welcome message in the alert box to the users.

<!DOCTYPE html>
<head>
   <title> Call JavaScript function on page load. </title>
</head>
   <body onload = "welcomeFunction()" >
   <h2> Methods to call a JavaScript function on page load. </h2>
   <h4> Call the JavaScript function on page load by using <i> onload </i> event in the HTML body tag. </h4>
   <div id="message"></div>
   <script type="text/javascript">
      let message = document.getElementById("message");
      function welcomeFunction() {
         alert( "welcome to the tutorialsPoint!" );
         message.innerHTML = "Function executed successfully on page load."
      }
   </script>
</body>
</html>


When users run the example code, they will give the welcome message in the alert box. When function execution completes, users will get the above output message.

Using the window.onload Event in JavaScript

Here, we have a second approach for calling the function on page load in JavaScript. Every web page contains the window object by default, and the window object represents the global variables. We can access any global variable or function in JavaScript using the window object. In this approach, we will use the onload property of the window object.

By using the window.onload property, users can either call a named function or bind an anonymous function to the window.onload and all code inside the anonymous function will be executed after the page load.

Syntax

Users can follow the below syntax to use the window.onload to call a function on page load.

  • Syntax for anonymous function.

Window.onload = function {
   // code to execute on the page load
}
  • Syntax for named function.

Function simpleFunction ( ) {
   // function body
}
Window.onload = simpleFunction( );

Example

In the below example, we are calling the named function on the page load using the window.onload property.

<html>
<head>
   <title> Call JavaScript function on page load. </title>
</head>
<body>
   <h2> Methods to call a JavaScript function on page load. </h2>
   <h4> Call the JavaScript function on page load by using <i>window.onload</i> event in the JavaScript. </h4>
   <div id="message"> </div>
   <script type="text/javascript">
      window.onload = simpleFunction( 10, 20 ); // call function with parameters on page load
      function simpleFunction( num1, num2 ) {
         alert(" The sum of num1 and num2 is " + ( num1 + num2 ) );
         message.innerHTML = "Showing the message after alert box."
      }
   </script>
</body>
</html>


Using the DOMContentLoaded Event

JavaScript has a cool feature of the event listener, and users can call a function or perform some operation when any event triggers. In this approach, we will use the “DOMContentloaded” event. We will call the desired function using the addEventListener() method in JavaScript. Also, we will apply the event listener to the whole document such that we can call a function on the page load.

Syntax

To call the DOMContentLoaded event, users can follow the below syntax.

document.addEventListener("DOMContentLoaded", function() {
   // function body
});

Example

The below example demonstrates the use of the DOMContentLoded event to trigger a function call on the page load.

<html>
<head>
   <title> Call JavaScript function on page load. </title>
</head>
   <body>
   <h2> Methods to call a JavaScript function on page load. </h2>
   <h4> Call the JavaScript function on page load by using <i>document.addEventListener( ) </i>method.</h4>
   <div id="message"></div>
   <script type="text/javascript">
      let message = document.getElementById("message");
      document.addEventListener( "DOMContentLoaded", functionCall());
      function functionCall() {
         alert( "function call on the page load." );
         message.innerHTML = "Function body executed successfully on page load."
      }
   </script>
</body>
</html>


Users will also see the alert box with the message when the function will be executed.

Conclusion

Here, we have defined three approaches to trigger a function call on the page load. The first approach we can use inside the HTML code, the second one in the JavaScript code, and the third approach is the best approach to achieve our goal.

Furthermore, users can change the event in the third approach to trigger a function on a particular event. One more thing in the last approach is rather than triggering the event listener to the whole document, users can apply it to a specific HTML element also.

raja
Updated on 20-Jul-2022 07:06:57

Advertisements