I am trying to make a function run every time the "resize" event fires out. But there is something that prevents it from happening. When I write an anonymous function and console log something when the event 'resize' fires - it works. Help me understand why this may could have happened.

window.addEventListener("resize", getNumberOfShelves(arr, width));

function getNumberOfShelves( arra, w ) {
 if(wrap.firstChild) {
    wrap.removeChild(wrap.firstChild);
 }
 if(w >= 1126) {
     var numberOfBooks = 4;
     var arrayOfArrays = [];

     for (var i=0; i<arra.length; i+=numberOfBooks) {
          arrayOfArrays.push(arra.slice(i, i+numberOfBooks));
     }

     array1 = arrayOfArrays[0];
     array2 = arrayOfArrays[1];
     create(array1);
     create(array2);
}

I am trying to make a function run every time the "resize" event fires out. But there is something that prevents it from happening. When I write an anonymous function and console log something when the event 'resize' fires - it works. Help me understand why this may could have happened.

window.addEventListener("resize", getNumberOfShelves(arr, width));

function getNumberOfShelves( arra, w ) {
 if(wrap.firstChild) {
    wrap.removeChild(wrap.firstChild);
 }
 if(w >= 1126) {
     var numberOfBooks = 4;
     var arrayOfArrays = [];

     for (var i=0; i<arra.length; i+=numberOfBooks) {
          arrayOfArrays.push(arra.slice(i, i+numberOfBooks));
     }

     array1 = arrayOfArrays[0];
     array2 = arrayOfArrays[1];
     create(array1);
     create(array2);
}

• javascript

Share Improve this question Follow edited Feb 6, 2020 at 21:11 Huangism 16.4k77 gold badges5050 silver badges7575 bronze badges asked Feb 6, 2020 at 21:09 brad_freshbrad_fresh 12922 silver badges1313 bronze badges 1

• or bind the function or wrap the function in another anonymous function, because right now, you are just calling the function and not binding it to resize listener – Calvin Nunes Commented Feb 6, 2020 at 21:15

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 4

You're not passing a reference to a function for handling the resize event. You're calling a function while declaring that addEventListener.

So it's only going to run once, and then whenever resize happens, nothing else happens because there is no function to call back (since the return of your getNumberOfShelves is the undefined primitive).

Instead, start with window.addEventListener("rezise", event => handleResize(event)); and then create a function like

handleResize(event) {
  ...
}

which does whatever you actually need done.

I feel like you're not passing the arguments of the function properly, try this:

window.addEventListener("resize", function(){
    getNumberOfShelves(arr, width)
});

instead of the first line

The addEventListener function takes two arguments, the first one being the event type, in your case the resize and the second one a callback function. When you write:
getNumberOfShelves(arr, width) javascript will run that function immediately and only once.

If you want to run it everytime that event fires you need to pass a function reference.

If the function doesn't have any parameters you could only do
window.addEventListener("resize", getNumberOfShelves);

But in your case it has two parameters so you want to do
window.addEventListener("resize", () => getNumberOfShelves(arr, width));.

Hope this simple explanation helped you, for more information about the function read this:
https://developer.mozilla/en-US/docs/Web/API/EventTarget/addEventListener

when you add () to the end of a function, you call/invoke/execute that function. In an event listener, you want the function to be called by the event listener, not you, so you don't call it there unless of course your function returns a function.