配列からランダムに呼び出し[JQuery]

配列の中からランダムに呼び出して表示する

See the Pen
by ぼぶ@朝活input中 (@bobu_6326)
on CodePen.

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="
    crossorigin="anonymous"></script>
</head>
<body>

<button>ここをクリック</button>
<div class="result"></div>


</body>
</html>

JQuery

$(function(){
  let result = ['大吉','吉','大凶'];
  $('button').on('click',function(){
    let answer = result[Math.floor(Math.random() * result.length)];
    $('.result').text(answer);
  })
});

解説

button をクリックすると .result に 配列result の中からランダムに一つ表示される

変数result には表示したい結果を入力、.on(‘click’,function(){ }) の後の 変数answer でランダムに呼び出す

jquery.logo

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!

この記事を書いた人

bobuのアバター bobu Webクリエイター

ホームページ制作、リメイク、バナー、画像制作を行っています。
毎朝5:00-7:00 まで朝活で ITの知識を インプット+ Twitter へアウトプット。
お仕事のご依頼は「お問い合わせページ」からご連絡ください。