【JavaScript】テキストや画像をランダムに表示する

2023年7月8日

Math.random&Math.floorという関数を使い、ランダムに特定のテキストや画像などを表示する方法を紹介します。
自分の学習・メモ用がメインですが、プログラミング学習初心者の参考になればとも思います！

実装例とコード

※ページを開くまたは更新（リロード）するたびに運勢が変わります。

今日の運勢は【】です！

0からnまでのランダムな整数値を生成するにはMath.floor(Math.random() * (n + 1))を使う！

Math.floor()は、引数に指定した数値以下の最大の整数（つまり、小数点以下を切り捨てる）を返す関数。
Math.random()は、0〜1未満のランダムな値を返す関数。

HTML/CSS/JavaScript コードはこちら

<p>今日の運勢は【<span id="fortune"></span>】です！</p>
<button id="custom-button">もう一度今日の運勢を占う</button>

p {
  width: 80%;
  height: 100px;
  margin: 0 auto 16px;
  background-color: #eee;
  text-align: center;
  font-size: 36px;
  line-height: 100px;
}

#fortune {
  font-weight: bold;
}

#custom-button {
  display: block;
  width: 40%;
  height: 50px;
  margin: 0 auto;
  background-color: blue;
  border-radius: 8px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  cursor: pointer;
}

.custom-button:hover {
  opacity: .7;
}

const fortune = document.getElementById('fortune');
const fortunes = [
  '大吉',
  '中吉',
  '小吉',
  '末吉',
  '凶'
];
const btn = document.getElementById('custom-button');

fortune.textContent = fortunes[Math.floor(Math.random() * fortunes.length)];

btn.addEventListener('click', () => {
  fortune.textContent = fortunes[Math.floor(Math.random() * fortunes.length)];  
});

予め表示したいメッセージ（この場合は運勢）を変数（fortunes）に配列で格納しておく。
『Math.floor(Math.random() * fortunes.length』とすることで、0から「変数fortunesに格納された要素数 – 1」の整数値をランダムに生成できる。
これをfortunesのインデックスに指定することで、要素をランダムに取得できる。