【javascript】ページを読み込む度に要素をランダムに入れ替える

今回はタイトルにあるようにロードごとに要素の並びをランダムに変える方法について紹介していきたいと思います。

固定であればorderを使って数字を入れることで順番を入れ替えることはできますがランダムに順番を変化させたい場合はjavascriptを使います。

ランダムで表示させる場合はランダム関数を使用します。

ランダム関数を使って要素の並びを変化させる方法
1. html
2. javascript
サンプル

ランダム関数を使って要素の並びを変化させる方法

html

<ul class="list">
        <li>item01</li>
        <li>item02</li>
        <li>item03</li>
        <li>item04</li>
</ul>

javascript

window.addEventListener('load', function() {
  const listElem = document.querySelector('.list');
  const elems = listElem.children;

  for (let i = elems.length; i >= 0; i--) {
    listElem.appendChild(elems[Math.random() * i | 0]);
  }
});

上記の記述で「.list」要素内にある子要素の順番をランダムに入れ替えることができます。

この方法であれば、ページを読み込むたびにランダムに数値が変更されて要素の順序もランダムに変えることができます。

サンプル

下記はサンプルになります。

ロードごとに要素（item01～item04）が入れ替わります。

item01
item02
item03
item04