配列からランダムに一つ要素を選ぶ【おみくじ】

▼公式

~.textContent = 配列名[Math.floor(Math.random() * 配列名.length)];

配列の値にHTMLタグも入れたい場合は、.textContent ではなく .innerHTML
配列名.length にすることで、配列の要素数が増減してもここを修正する必要がなくなる。

例）ボタンクリックで、ランダムに配列の値が代入される（下に動画あり）

"use strict";

{
  const btn = document.getElementById("btn");
  btn.addEventListener("click", () => {
		//配列
    const results = [
      "大吉",
      "中吉",
      "吉",
      "小吉",
      "末吉",
      "凶<span>＼ そんな日もあるさ ／</span>"
    ];

		//書き方 1)
    btn.innerHTML = results[Math.floor(Math.random() * results.length)];

		//書き方 2)
    const n = Math.floor(Math.random() * results.length);
    btn.innerHTML = results[n];
  });
}

画面収録 2022-01-11 21.39.14.mov

▼一応 HTMLとCSSも記載

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>JavaScriptでおみくじ</title>
    <link rel="stylesheet" href="./css/styles.css" />
  </head>

  <body>
    <div id="btn">
      おみくじ<br />
      スタート
    </div>

    <script src="./js/index.js"></script>
  </body>
</html>

body {
  font-family: sans-serif;
  background-color: #efefef;
}

#btn {
  width: 200px;
  height: 200px;
  background: #ef454a;
  border-radius: 999px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  color: #fff;
  font-weight: bold;
  font-size: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 10px 0 #d1483e;
  user-select: none;
  text-align: center;
}

#btn span {
  display: block;
  font-size: 10px;
}

#btn:hover {
  opacity: 0.9;
  /* box-shadow: 0 5px 0 #d1483e;
  top: 51%; */
}

#btn:active {
  box-shadow: 0 5px 0 #d1483e;
  top: 51%;
}