JavaScript

How to Use JavaScript Window Onload Function Call

In JavaScript, you would have observed that either some message or some operation is performed on the onload event of the window. For this purpose, the window.onload event is employed to call a function. During the page load, the user can display any kind of message or information by triggering this event in the browser. In this guide, you will learn how to use the JavaScript window.onload event in JavaScript. This post serves the following learning outcomes:

  • Display a Message on the Window Onload Event
  • Display the Sum of Two Numbers on the Window Onload Event

Display a Message on the Window Onload Event

An approach is considered to display a simple message by utilizing the window onload function call. JavaScript provides a window.onload event that is triggered during the loading of the webpage. Moreover, users can change the event to trigger a function based on a particular event. The syntax of the window.onload event is provided below:

Syntax

window.onload = fun()

In this syntax, the function “fun()” is called using the window.onload.

Code

<html>
<script>
    function fun() {
        alert(" Welcome to JavaScript World");
    }
window.onload=fun();
</script>
<h1> Example of the window.onload </h1>
</html>

The description of the code is given below:

  • A function “fun()” is utilized to generate an alert message “Welcome to JavaScript World”.
  • After that, the onload event is employed to call the function “fun()”.

Output

The output shows a message “Welcome to JavaScript World” in the alert box by employing the window.onload function.

Display the Sum of Two Numbers on the Window Onload Event

Another method is considered to add two numbers by calling the function using the window.onload event. The following code refers to adding two numbers on the onload event of the window:

Code

<html>
<h2> Methods to call a JavaScript function on page load. </h2>
    <script type="text/javascript">
        window.onload = simpFunction( 5, 10 );
        function simpFunction( number1, number2 ) {
            alert(" The sum of " + ( number1 ) + " and " + ( number2 ) + " is "
            + ( number1 + number2 ) );
        }
    </script>
</html>

The description of the code is as follows:

  • The “window.onload” event occurs to call the function in JavaScript.
  • A “simpFunction” method is used by passing two arguments “number1” and “number2”.
  • In this function, an alert message is generated which will add two numbers, “5” and “10”.

Output

The output shows that an alert box is loaded which shows the sum of “5” and “10”.

That’s it! You have learned to apply window.onload events in JavaScript.

Conclusion

JavaScript provides a window.onload event to call a function on the load event of the window. The function may point towards an alert message, a warning message, or to address any programming query. We have provided two different approaches to using the window.onload event in JavaScript. The first approach prints an alert message on the load event of the window, whereas the second example makes use of the window.onload event to address a mathematical problem.

About the author

Syed Minhal Abbas

I hold a master's degree in computer science and work as an academic researcher. I am eager to read about new technologies and share them with the rest of the world.