0

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?

Cœur
  • 37,241
  • 25
  • 195
  • 267
Sai
  • 29
  • 4
  • 1
    `$(function(){ $(window).on("resize",function() {....}); })` should work – mplungjan Feb 08 '19 at 10:04
  • 1
    addEventListener doesn't return. You need to add another event listener – baao Feb 08 '19 at 10:05
  • Vanilla Javascript has very limited method chaining - one of the strengths/benefits of using jquery – freedomn-m Feb 08 '19 at 10:08
  • Possible duplicate of [How does basic object/function chaining work in javascript?](https://stackoverflow.com/questions/1099628/how-does-basic-object-function-chaining-work-in-javascript) – ponury-kostek Feb 08 '19 at 10:08

1 Answers1

0

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() {

});
jcubic
  • 61,973
  • 54
  • 229
  • 402
  • Thanks a lot for the answer; Just solved it---and many other issues---by replacing the `window.addEventListener` with `$(window).load`. – Sai Feb 08 '19 at 10:39