How to append methods in JavaScript

Question

I'm working with jQuery, making a WordPress website, and ran into issues because Wordpress doesn't seem to work with the $(window).load(...) event listener, due to which I had to change the code.

Here's the original code in jQuery:

$(window).load(function(){
...
}).resize(function() {
...
});

Hers's what I'd changed it to:

window.addEventListener('load', function() {
...
}).resize(function() {
...
});

However, I get an error in console TypeError: windowAddEventListener is undefined . How can I solve this?

Answer 1

You have two issues:

1. addEventListener return undefined so you can't do anything after it
2. in vanilla JavaScript there are no resize function this is only in jQuery.

You will need this:

window.addEventListener('load', function() {
...
});

window.addEventListener('resize', function() {
...
});

and if you want chaining you will need:

const x = {
    load: function(fn) {
        window.addEventListener('load', fn);
        return this;
    },
    resize: function(fn) {
        window.addEventListener('resize', fn);
        return this;
    }
};

x.load(function() {

}).resize(function() {

});