facebookのような画像アップロードシステムの作成方法

Question

前提・実現したいこと

facebookのようなアップロード写真の枚数毎にレイアウトが変わるシステムを作成したいです。
そのためにHTML内のliタグをカウントして、その数値毎にclass属性をつけることで実現できるかなと思っています。
しかし、カウントする関数を作ったはいいですが、その値をif文で条件分岐させるときに値を定義できなくて悩んでいます。

発生している問題・エラーメッセージ

Uncaught ReferenceError: totalChildNumber is not defined

該当のソースコード

function liCount() {
   const ul = document.getElementById('gallery');
  
   var totalChildNumber = ul.childElementCount;
  
   return totalChildNumber;
 };

 liCount();

 
   if (totalChildNumber >= 5) {
    ul.classList.add('fifth-a');
   } else if (totalChildNumber >= 4) {
    ul.classList.add('forth-a');
   }else if (totalChildNumber >= 3) {
    ul.classList.add('three-a');
   }else if (totalChildNumber >= 2) {
    ul.classList.add('two-a');
   }

試したこと

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Answer 1

画像アップロードなので、サーバーサイドの処理をかませています。
画面表示してからカウントするのではなく、サーバーサイドでアップロード枚数を把握してからそれに見合ったレイアウトを表示させているに過ぎないと思います。
で、規定枚数越えていたら規定枚数用のレイアウトだけ表示して「もっと見る」ですね。