title: Javascript: Changing "document.body.onresize" does not take hold without "console.log"
body: <p>I'm writing a website with a canvas in it. The website has a script that runs successfully on every refresh except for a line at the end. When the script ends with:</p>
  
  <pre><code>document.body.onresize = function() {viewport.resizeCanvas()}
  </code></pre>
  
  <p>"document.body.onresize" is unchanged. (I double-checked in Chrome's javascript console: Entering "document.body.onresize" returns "undefined".)</p>
  
  <p>However, when the script ends with:</p>
  
  <pre><code>document.body.onresize = function() {viewport.resizeCanvas()}
  console.log(document.body.onresize)
  </code></pre>
  
  <p>"document.body.onresize" <strong>does</strong> change. The function works exactly as it should.</p>
  
  <p>I can't explain why these two functionally identical pieces of code have different results. Can anyone help?</p>
  
  <hr>
  
  <p>Edit: As far as I can tell, "document.body" is referring to the correct "document.body". When I call <code>console.log(document.body)</code> just before I assign <code>document.body.onresize</code>, the correct HTML is printed.</p>
  
  <hr>
  
  <p>Edit 2: A solution (sort of)</p>
  
  <p>When I substituted "window" for "document" the viewport's "resizeCanvas" function was called without fail every time I resized the window.</p>
  
  <p>Why does "window" work while "document" only works if you call "console.log" first? Not a clue.</p>
  
  <p><img src="https://i.stack.imgur.com/O2v4v.jpg" alt="enter image description here"></p>