1

I'm quite new to JS and I am running into the same problem over and over again.

I simply do not know how to pass variables into functions the right way. There is something I am missing on, and I do not know what it is. And it is starting to get frustrating.

To change the height of a block on window resize; This works fine:

function changeGridFullScreen(event) {
   var bodyHeaderHeight = document.getElementById('body-header').clientHeight;
   var newHeight = window.innerHeight - bodyHeaderHeight;                
   var fsClasses = document.getElementsByClassName("grid-full-screen");

   for(var i=0; i<fsClasses.length; i++){
      fsClasses[i].style.height = newHeight+"px";
      document.getElementById("logger").innerHTML = newHeight+"px";
   }
}

window.addEventListener('resize', changeGridFullScreen, true);

But when I want to pass an array of some sorts. In this example the minimum clientHeight of a block. I simply do not know how to pass it, in all cases i break functionality. If tried several combinations, and probably am Googling on wrong search terms because i cant find a solution to this...

function changeGridFullScreen(event, minHeights) { // **<- what do i put in here**

   var bodyHeaderHeight = document.getElementById('body-header').clientHeight;
   var newHeight = window.innerHeight - bodyHeaderHeight;                
   var fsClasses = document.getElementsByClassName("grid-full-screen");

   for(var i=0; i<fsClasses.length; i++){
      if(newHeight >= minHeights[i]){
         fsClasses[i].style.height = newHeight+"px";
      }     
   }
}

function minHeights(){

   var fsClasses = document.getElementsByClassName("grid-full-screen");
   var minHeights = [];

   for(var i=0; i<fsClasses.length; i++){          
      minHeights[i] = fsClasses[i].clientHeight;                    
   }

   return minHeights;
}
            

var heights = minHeights();
window.addEventListener('resize', changeGridFullScreen(heights), true); // **<- what do i put in here**

Anybody here to hand me the solution?

Boberwt
  • 23
  • 3
  • 1
    `window.addEventListener('resize', e => changeGridFullScreen(heights), true)`, but why not to use `heights` variable in the event handler function? – Teemu Jul 07 '22 at 11:20
  • 1
    So here's the thing: the function you are adding to the event listener will be called by the system when the event occurs with just the `event` passed in. To scope it with more, you should wrap it in another function that has a reference to your stuff. So `addEventListener( 'resize', (event=> changeGridFullScreen( event, heights ))` will work, because that method is created in a scope that has access to the `heights` variables. Maybe read up on scoping... – somethinghere Jul 07 '22 at 11:21
  • Teemu & somethinghere, Thank you for your answers, they look both simular and the solution of somethinghere works flawlessly. I am definitly learning coming from PHP en MySQL only and will sure be reading up on scoping. To answer your Question Teemu: I want to save te minimum client Height of a block on page load. When included in the event handler, the client height of the block gets overwritten time after time. In this case the block can never be resized smaller than the initial value. – Boberwt Jul 07 '22 at 14:15

0 Answers0