title: why doesn't my JS function fire on the onresize event?
body: <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function getCentralPosition() {
  
    // This script verticaly centers the heading you see on the main home page video //
  
  
    // First save the parent div that houses the heading element into a variable named parentDiv.
    var parentDiv = document.getElementById('home-section-1');
  
    // Now obtain the total height (including padding, borders etc) of this parentDiv
    var parentDivHeight = parentDiv.offsetHeight;
  
    // Save the child div element that houses the heading into a variable named childDiv
    var childDiv = document.getElementById('home-first-overlay');
  
    // Now obtain the total height (including padding, borders etc) of this childDiv
    var childDivHeight = childDiv.offsetHeight;
  
    // Calculate the height difference between the parentDiv and childDiv by subtracting their heights and storing them 
    // in a variable named heightDiff
  
    var heightDiff = parentDivHeight - childDivHeight;
  
    // Obtain the precise position required from the top of the parentDiv by dividing heightDiff by 2
  
    var pos_from_top = heightDiff / 2;
  
    // assign pos_from_top as the value for 'top' on childDiv using "px"
  
    childDiv.style.top = pos_from_top + "px";
  
  }
  
  window.addEventListener("onresize", getCentralPosition);</code></pre>
  </div>
  </div>
  </p>
  
  <p>without the window resize eventlistener, I used the code as is - but the idea is that it also stays in the center when one trys to resize the browser window etc.  Thought not necessary, i just wanted to achieve this. Any ideas as to what I should be trying ?</p>