How to call a method onload in JavaScript

window.onload = function()
call javascript function after page load complete
on page load javascript
call javascript function on page load c#
how to call ajax function on page load in javascript
javascript onload div
call javascript function after div load
window.onload is not a function

So I want to call a function Local.getThis onload with this code:

    class Local {
        getThis() {
            let that;
            if (localStorage.getItem('that') === null) {
                that = [];
                console.log(that);
                localStorage.setItem('that', that);
            } else {
                that=JSON.parse(localStorage.getItem('that'));
                console.log(that);
            }
        }

    // DOM Load Event 
    document.addEventListener('DOMContentLoaded', Local.getThis)

But nothing is happening, no error nothing. But when I change "getThis" to STATIC it works (Output: []). Does it need to be STATIC ??

P.S.

After setting that = []; I get an error

'Uncaught SyntaxError: Unexpected end of JSON input
    at JSON.parse (<anonymous>)
    at HTMLDocument.getThis'

on the next reload but that is probably a whole other problem I guess.

EDIT:

For the record the error was related to localStorage.setItem('that', that);, it should be ofcourse localStorage.setItem('that', JSON.stringify(that));

part 1: this is a reserved word in JavaScript, change parameter's name.

part 2: Local is a class, so to access a function directly from it that function must be static. Otherwise an instance needs to be initiated first. and the function can then be used from that instance.

onload Event, To call a function on page load, use − window.onload. Example. You can try to run the following code to implement a JavaScript function on  The onload event shall be used to verify the type of the visitor's browser and version of the browser, and then load an individual web page version based on the information. The onload event can deal with cookies. onload Event Explained. The JavaScript onload event can be applied when it is necessary to launch a specific function once the page

But nothing is happening, no error nothing. But when I change "getThis" to STATIC it works (Output: []). Does it need to be STATIC ??

To call your method as Local.getThis need to be static.

Otherwise you need to create an instance of Local.

var local = new Local();
document.addEventListener('DOMContentLoaded', function() {
  local.getThis();
})

How to run a function when the page is loaded in JavaScript , js is located in the same directory as the html page. // onload event of body element function bodyOnLoad(){ addListItem("body onload");  window.onload for executing as soon as page loads Window.onload function we can use to perform some task as soon as the page finishes loading. This JavaScript function is used in different condition like displaying a print page or directing focus ( keeping the crusher blinking ) to user input field as soon as the page is loaded.

You should create an instance of Local class first to have this

const local = new Local();
document.addEventListener('DOMContentLoaded', local.getThis.bind(local))
//or
document.addEventListener('DOMContentLoaded', function() {
  local.getThis();
})

Update

Also you cannot use variable name this as it is reserved word. If you don't need a context (this) you can create a method as a static method:

class Local{}
Local.getThis = function() {
 // code without this
}

so then you can use as you've written:

document.addEventListener('DOMContentLoaded', local.getThis);

How do I call a JavaScript function on page load?, One method that has been used quite a bit is the linking of multiple events. It places several function calls in a chain, using one onload event handler. part 1: this is a reserved word in JavaScript, change parameter's name. part 2: Local is a class, so to access a function directly from it that function must be static. Otherwise an instance needs to be initiated first. and the function can then be used from that instance.

How to Call JavaScript Function on Page Load, The window.onload function is widely supported by popular browsers. It begins as soon as the resource is loaded. As we already mentioned  As shown in the script above, it's easy to use, but what if you have more than one function you want to call using an onload event handler? You would think you could just stack them like this: window.onload=func1; window.onload=func2; window.onload=func3;

Using Multiple JavaScript Onload Functions, JavaScript and jQuery library offers several ways to execute a function after the DOM is ready. This post provides a detailed overview of methods to accomplish this  The onload attribute can be used to check the visitor's browser type and browser version, and load the proper version of the web page based on the information. The onload attribute can also be used to deal with cookies (see "More Examples" below).

JavaScript Onload Event: Run JavaScript on Page Load Explained, Old-fashioned JavaScript might call a function onload either by including it in the body onload attribute or by  Here we can see that it happens in about the same time as img.onload (img is the last resource) and window.onload. Switching to complete state means the same as window.onload. The difference is that window.onload always works after all other load handlers. Summary. Page load events: The DOMContentLoaded event triggers on document when the DOM

Comments
  • I believe you'd need to create a new instance of the class before using one of its instance methods. I.e., new Local() before trying to use getThis
  • Sorry for this mistake but it is actually a part of a more complex program so i named it 'this' just for an example.