Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Javascript: Changing "document.body.onresize" does not take hold without "console.log"

Tags:

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:

document.body.onresize = function() {viewport.resizeCanvas()}

"document.body.onresize" is unchanged. (I double-checked in Chrome's javascript console: Entering "document.body.onresize" returns "undefined".)

However, when the script ends with:

document.body.onresize = function() {viewport.resizeCanvas()}
console.log(document.body.onresize)

"document.body.onresize" does change. The function works exactly as it should.

I can't explain why these two functionally identical pieces of code have different results. Can anyone help?


Edit: As far as I can tell, "document.body" is referring to the correct "document.body". When I call console.log(document.body) just before I assign document.body.onresize, the correct HTML is printed.


Edit 2: A solution (sort of)

When I substituted "window" for "document" the viewport's "resizeCanvas" function was called without fail every time I resized the window.

Why does "window" work while "document" only works if you call "console.log" first? Not a clue.

enter image description here