jsでif文外で宣言した変数をif文内に書くと反映しない理由について

変数と同じif文外の記述　footer_h.style.top = client_h_h + client_h + 'px';　が反映し、
if文内の　同文は反映されませんでした。

jsで、id：mainの高さを取得してid：footerのtopに取得した高さを代入するというのを書きたくやっております。ブラウザを更新しても反映されませんでした。記述の間違いが無いか、まだjsを始めたてでわからずです。
jsの勉強になるかと思い、可変するコンテンツに合わせてフッターを移動させたいというのがこのコードの目的です。
よろしくご教授ください。

html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta http-equiv="X-UA-Compatible" content="IE=edge">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <title>Document</title>
8    <style type="text/css">
9        body{
10            position: relative;
11        }
12        header{
13            position: absolute;
14            height: 100px;
15        }
16        main{
17            position: absolute;
18            top:100px;
19        }
20        footer{
21            position: relative;
22            height: 100px;
23        }
24    </style>
25</head>
26<body>
27    <header id="header">header</header>
28    <main id="main">
29        親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。別段深い理由でもない。新築の二階から首を出していたら、同級生の一人が冗談に、いくら威張っても、そこから飛び降りる事は出来まい。弱虫やーい。と囃したからである。小使に負ぶさって帰って来た時、おやじが大きな眼をして二階ぐらいから飛び降りて腰を抜かす奴があるかと云ったから、この次は抜かさずに飛んで見せますと答えた。（青空文庫より）
30        親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。別段深い理由でもない。新築の二階から首を出していたら、同級生の一人が冗談に、いくら威張っても、そこから飛び降りる事は出来まい。弱虫やーい。と囃したからである。小使に負ぶさって帰って来た時、おやじが大きな眼をして二階ぐらいから飛び降りて腰を抜かす奴があるかと云ったから、この次は抜かさずに飛んで見せますと答えた。（青空文庫より）
31        親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。別段深い理由でもない。新築の二階から首を出していたら、同級生の一人が冗談に、いくら威張っても、そこから飛び降りる事は出来まい。弱虫やーい。と囃したからである。小使に負ぶさって帰って来た時、おやじが大きな眼をして二階ぐらいから飛び降りて腰を抜かす奴があるかと云ったから、この次は抜かさずに飛んで見せますと答えた。（青空文庫より）
32    </main>
33    <footer id="footer">footer</footer>
34    <script>
35        var client_h = document.getElementById('main').offsetHeight;
36        var client_h_h = document.getElementById('header').offsetHeight;
37        var footer_h = document.getElementById('footer');
38
39        console.log(client_h);
40        footer_h.style.top = client_h_h + client_h + 'px';
41        if ( client_h > 500 ) {
42            
43            footer_h.style.top = client_h_h + client_h + 'px';
44        }
45    </script>
46</body>
47</html>

y_waiwai

2022/06/30 13:56

反映されない、とは具体的にどうなるんでしょうか。問題が見えません

hanemayu

2022/06/30 14:06

if文外で書いたコードだとfooterにtop:〇〇px;と出ます。 if文内だとそれが出ません。こちらで大丈夫でしょうか？

行動規範の内容に同意します

回答1件

ベストアンサー

scriptタグ内のコードは1回しか実行されないので、そこからいくらサイズを変更しても反映されません。
console.logで出力を確認しているなら1回分しか高さの出力がなかったことが確認できたはずです。
(それをif内が反映されていないと勘違いしたのかな？というかそもそも示されているコードではif内外のコードが同一だから変化するわけないんだけど)
ひとまずscriptタグ内のコードを関数にし、window.onresizeに登録してみてください。

投稿2022/06/30 14:09

編集2022/06/30 14:38

RiaFeed

総合スコア2701

hanemayu

2022/06/30 14:35

回答ありがとうございます、コメントにしてif文内が反映されるかされないか試しに同じコードを書いてます。ブラウザリロードのときそうやって試してみました。知らない言葉が出てきたので（windows.onresize）検索してみます。取り敢えずこのスクリプトは関数にしてみます。早く答えて頂いてありがとうございます。助かります。