If you already know more or less JavaScript, then you have probably heard about the event handler load, which is called onload. This event fires immediately when the page is loaded. And very often some function must be executed when the page is loaded. But what if you need to run multiple javascript functions? Actually, this question was asked by one of the users on the site. Therefore, about running multiple functions in onload, I will write in this article.

The solution is really trivial, just run a function that runs all the necessary other functions:

If open this page(there are no such important things as tags html or, for example, the title and encoding of the page, in order to simplify the understanding of the code), you will see how the functions will work when the page is loaded b() And c().

button click on page load (4)

I want to run a function when the page is loaded but I don't want to use it in .

I have a script that runs if i initialize it in , for example:

Function codeAddress() ( // code )

But I want to run it without and i have tried many things like:

Window.onload = codeAddress;

But it doesn't work.

So how do I run it on page load?

window.onload = function() ( ...etc is not a great answer.

This will probably work, but it will also break any other functions already hooking into this event. Or, if another function hooks on this event after yours, it will break. So, you can spend many hours later trying to figure out why something that works doesn't exist anymore.

More robust answer here:

If(window.attachEvent) ( window.attachEvent("onload", yourFunctionName); ) else ( if(window.onload) ( var curronload = window.onload; var newonload = function(evt) ( curronload(evt); yourFunctionName( evt); ); window.onload = newonload; ) else ( window.onload = yourFunctionName; ) )

Some code I used forgot where I found it to give the author credit.

Function my_function() ( // whatever code I want to run after page load ) if (window.attachEvent) (window.attachEvent("onload", my_function);) else if (window.addEventListener) (window.addEventListener("load ", my_function, false);) else (document.addEventListener("load", my_function, false);)

Hope this helps :)

Instead of using jQuery or window.onload, native JavaScript has adopted some great features since the release of jQuery. Everyone has modern browsers now it is own function DOM ready without using the jQuery library.

Document.addEventListener("DOMContentLoaded", function() ( alert("Ready!"); ), false);

window.onload = codeAddress; - should work, and the full code is:

Take a look at the domReady script, which allows you to set up a few functions to execute when the DOM is loaded. This is basically what Dom is ready to do in many popular JavaScript libraries, but is lightweight and can be taken and added at the beginning of your external file script.

Usage example

// add reference to domReady script or place // contents of script before here function codeAddress() ( ) domReady(codeAddress);

Today I want to talk about one problem that often arises for people who start learning Javascript.

They try to interact with HTML elements on the page that are lower in code than the script itself. Accordingly, the script has already loaded, but the element with which you will need to interact has not yet. For this reason, nothing will work.

Peculiarity Javascript language in that its code is executed sequentially, line by line, as they are written in the source code.

Here is an example:

The css rule (background-color:yellow) will not be applied to the element with id #block, because line

$("#block").css("background-color", "yellow");

Will be executed before the html line is loaded:

What if we need to execute a code or function only after the entire document is fully loaded?

I want to talk about three ways how this can be done.

1 way. Using the jquery library.

Most often I use it myself, the most simple and convenient solution, but it requires the connection of the Jquery library.

Here is how the previous code will be transformed if we use the following method.

2 way. With the body element and the onload attribute.

3 way. With the window object and its onload property.

Choose the method that best suits your situation and put it into practice.