JS初心者です。
画面のサイズを取得した変数を必要に応じて更新したいのですが、更新後に値を確認すると0になってしまいます。
Javascript
1var Body = { 2 getPlayer: function(){return document.getElementsByClassName('player-video')[0]}, 3 ...//略 4} 5 6var Screen = {} 7Screen.width = 0 8Screen.height = 0 9 10var MyApp = { 11 updatePlayerStatus: function(){ 12 Screen.width = Body.getPlayer().clientWidth 13 Screen.height = Body.getPlayer().clientHeight 14 console.log(Screen.width)//ちゃんと表示される 15 }, 16} 17 18window.onload = function(){ 19 MyApp.updatePlayerStatus() 20 console.log(Screen.width)//ちゃんと表示される 21}
試したこと
おそらく別の場所でScreen.widthを使うと、値を持ってきただけで大元が変わるわけではないのだろうなぁなどと考え、宣言する場所を変えたりしてみましたが結果は変わらず、改善策が思いつきません。
どうすれば最初のScreen.width自体を変えることができるかご教示頂きたいです。
###追記
このコードはTampermonkeyでTwitchの配信視聴ページ(https://www.twitch.tv/ユーザー名)向けのスクリプトを書いた時のものです。一番重要な部分を書き忘れていました。申し訳ございません。
色々と試してみた結果、window.onloadではなく以下の様な方法で実行させると現象が起きました。
Javascript
1var Body = { 2 getPlayer: function(){return document.getElementsByClassName('player-video')[0]} 3} 4 5var Screen = {} 6Screen.width = 0 7Screen.height = 0 8 9var MyApp = { 10 updatePlayerStatus: function(){ 11 Screen.width = Body.getPlayer().clientWidth 12 Screen.height = Body.getPlayer().clientHeight 13 console.log(Screen.width)//正しく表示される 14 }, 15} 16////プレイヤーが読み込まれたら実行 17let retry_count=0 18var waitLoading = setInterval(function(){ 19 retry_count++ 20 if(retry_count > 10)clearInterval(waitLoading) 21 if(Body.getPlayer()!==undefined){ 22 MyApp.updatePlayerStatus() 23 console.log(Screen.height)//0 24 clearInterval(waitLoading) 25 } 26}, 1000)