Javascriptで配列の中から1個ランダムに選んで出力しよう

creeper_developer

2025年1月21日 12:39

こんにちはこんばんは creeper_developerです
この記事ではJSの乱数生成について学んでいきましょう

作業用フォルダを作ろう

まずはデスクトップでも何でもいいのでフォルダを作り、
名前をおみくじに変更しましょう※変更しなくてもOK

そしたらそのファイルの中にtxtファイルを作成してファイル名を.txt含めて丸ごと「index.html」に変更しましょう

そしてまたまたtxtファイルを作成してファイル名を.txt含めて丸ごと「main.js」
に変更しましょう

index.htmlを書こう

以下のコードをindex.htmlにコピペしましょう※開くテキストエディターについては
前回の記事で紹介してます

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>くじ引き</title>
  <style>
    body {
      text-align: center;
    }

    .title {
      color: lightseagreen;
      font-size: xxx-large;
      margin-bottom: 50px;
    }
  </style>
</head>

<body>
  <h1 class="title">結果</h1>
  <button onclick="Generate()">生成</button>
  <p id="main"> - - - </p>

  <script src="main.js">

  </script>
</body>

</html>

main.jsを書こう

以下のコードをmain.jsにコピペしましょう

function randomGenerate(list, lengs) {
  let random = Math.floor(Math.random() * lengs);
  let init = list[random];
  return init;
}

function $(id) {
  return document.getElementById(id);
}

function Generate() {
  let list = ["外れ", "外れ", "当たり"];
  let lengs = list.length;
  const r = `${randomGenerate(list, lengs)}`;
  console.log(r);
  $("main").innerHTML = "<p> " + r + "</p>";
}

読み込もう

chromeなどのブラウザをクリックしてCtrl + Oを押してさっき作ったファイルを開きましょう!

生成ボタンをクリックして- - -に結果が表示されます

終わり

この記事はこれで以上です
ではまた。
※タイプミスなどあったら教えてくれると嬉しいです