How to: Run a Function on Page Load with JavaScript

Are you looking to run a function as soon as your webpage loads? Well, you’re in luck because in this tutorial, we’re going to walk you through how to do just that using JavaScript.

First things first, you need to decide what function you want to run. Let’s say you have a function called “myFunction” that you want to run on page load. Here’s how you can achieve that using JavaScript:

Step 1: Select the element you want to attach the function to

To run a function on page load, you need to first select the element you want to attach the function to. In this case, we want to attach the function to the entire webpage, so we can use the document object.

const body = document.querySelector('body');

Step 2: Define the function you want to run

Next, you need to define the function you want to run on page load. In this example, we’re using a function called “myFunction”.

function myFunction() {
  console.log('Hello, world!');
}

Step 3: Attach the function to the selected element

Now that you have the function and the selected element, you need to attach the function to the element. In this case, we’re attaching the function to the body of the webpage.

body.onload = myFunction;

And that’s it! Now, every time the webpage loads, the “myFunction” function will run.

Here’s the complete code:

const body = document.querySelector('body');

function myFunction() {
  console.log('Hello, world!');
}

body.onload = myFunction;

It’s important to note that there are other ways to achieve this as well. You can use the addEventListener method or the window.onload method to attach a function to the page load event. However, the method we just discussed is the simplest and most straightforward.

As mentioned above, there are other methods you can use to attach a function to the page load event. Let’s take a closer look at those methods now.

Method 1: Using addEventListener

The addEventListener method allows you to attach a function to an event, such as the page load event. Here’s how you can use it to attach a function to the page load event:

window.addEventListener('load', myFunction);

In this example, we’re using the window object to attach the function to the page load event. We’re also using the addEventListener method to attach the function instead of the onload property.

Method 2: Using window.onload

The window.onload method is another way to attach a function to the page load event. Here’s how you can use it:

window.onload = myFunction;

In this example, we’re using the window object again to attach the function to the page load event. We’re also using the onload property to attach the function.

Which method should you use?

All three methods accomplish the same thing, which is to attach a function to the page load event. However, the addEventListener method and the window.onload method offer more flexibility and allow you to attach multiple functions to the same event.

So, which method should you use? It ultimately comes down to personal preference and the specific needs of your project. If you only need to attach one function to the page load event and want to keep it simple, using the onload property is a good option. However, if you need to attach multiple functions or want to be more flexible in the future, using the addEventListener method or the window.onload method may be a better choice.

In conclusion, there are several ways to run a function on page load using JavaScript. Whether you use the onload property, the addEventListener method, or the window.onload method, the important thing is that you attach the function to the page load event so that it runs automatically when the page loads.

How to: Run a Function on Page Load with JavaScript

Related tutorials