89279


現在、簡単なランダムゲームを jQuery を駆使し作っているのですが、ランダムな値を設定する方法が分からず、行き詰まっています。

今回私が作っているものの構成としては、以下のようなものです。

  * どちらかのボタンを押したら不正解ラッパーが `fadeIn` される
  * どちらかのボタンを押したら正解ラッパーが `fadeIn` される

しかし、もう一度実行した際に前回の正解ボタンを押しても正解とは限らない（`Random` 値がセットされる）と言うふうにしたいです。

[こちら](https://www.w3schools.com/js/js_random.asp)で Javascript における `Random`
の使い方を調べたところ、`Math.random()` を使えば良いという事でしたので、 `num1` と `num2`
の値をセットしてみましたが、ボタンへの割当方が分からなかったので当たり前ですが動作しませんでした。  
`getElementById()` などでも使って値を割り当てるのでしょうか？

私の推測だと

  * コードの最初に `Math.random()` でランダム値をセットして、
  * 変数 `num1` と `num2` にそれぞれ `1` と `2` を割り当てる
  * `num1` が割り当てられたボタンは正解、`num2` が割り当てられたら不正解

と言う順序で書けば求めている結果になると推測しているのですが、この考え方はあっていますでしょうか？

* * *

**Javascriptコード：**

[code]

    $(document).ready(function() {
    
        let num1 = 1;
        let num2 = 2;
        
        Math.random(num1,num2); //ここで何をすれば良いのかわからない
    
        $('#first').click(function(){
            $('#correct').fadeToggle(1000);
            $('.btn').css('display','none');
    
        });
        $('#second').click(function(){
            $('#incorrect').fadeToggle(1000);
            $('.btn').css('display','none');
        });
    });
    
[/code]

**HTMLコード：**

[code]

    <button class="btn" id="first">Click Me!</button>
    <button class="btn" id="second">Click Me!</button>
    
    <div class="wrapper" id="incorrect">不正解……</div>
    <div class="wrapper" id="correct">正解！</div>
    
[/code]

**CSSコード：**

[code]

    @import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@300&display=swap');
    
    .btn {
        background-color: red;
        border: none;
        height: 100px;
        width: 200px;
        border-radius: 50px;
        font-size: 25px;
        color: white;
        opacity: 0.7;
        box-shadow: 0px 6px #990f05;
        cursor: pointer;
    
    }
    .btn:hover {
        opacity: 1;
    }
    .btn:active {
        position: relative;
        top: 6px;
        box-shadow: none;
    }
    .wrapper  {
        height: 400px;
        font-size: 70px;
        text-align: center;
        padding-top: 150px;
        display: none;
        color: white;
        font-family: "Zen Maru Gothic";
        font-weight: bold;
    }
    #correct {
        background-color: #33FF69;
    }
    #incorrect {
        background-color: red;
    }
    
[/code]


CC BY-SA 4.0
2022-06-07T16:42:34.557
89273
2022-06-08T16:56:34.807
2022-06-08T16:56:34.807
3060
51596
question
javascript html
ボタンを押したらRandomな値がセットされるようにしたい


jQueryのランダムおみくじなどを参考にしました。

[code]

    <div class="random_button">
      <div class="rand_name"></div>
      <button type="button1" class="stop">Click Me!</button>
      <button type="button2" class="stop">Click Me!</button>
      <button type="button1" class="restart" style="display: none;">Click Me!</button> 
      <button type="button2" class="restart" style="display: none;">Click Me!</button>
    </div>
    
    <script>
    $(function(){
        var aryList = ['正解!','不正解……'];
    
        var key = 0;
        var max_len = aryList.length - 1;
        var randStart;
        var speed = 30; //シャッフルスピード
    
        var randShuffle= function(){
             if(key > max_len) key = 0;
             $('.rand_name').text(aryList[key]);
             key++;
         }
    
         randStart = setInterval(randShuffle, speed);
    
    
         //回転を止める（抽選結果）
         $('.stop').click(function(){
             var random = Math.floor(Math.random() * (max_len + 1)); //ランダムで配列の数を取得
             $('.rand_name').text(aryList[random]); //対象の数値に該当する文字を表示 
            clearInterval(randStart); //シャッフルストップ
        
        });
    
       //回転を再開する
        $('.restart').click(function(){
            $(this).hide(); //再開ボタンの非表示
            $('.stop').show(); //止めるボタンの表示
            randStart = setInterval(randShuffle, speed); //シャッフル再開
        });
    
    });
    
     </script>`
    
[/code]


CC BY-SA 4.0
2022-06-08T02:48:40.630
89279
2022-06-08T09:30:40.617
2022-06-08T09:30:40.617
50767
50767
89273
answer

[code]

    //範囲の乱数生成
    function RandomInt(MinSize,MaxSize){
        return parseInt(Math.random() * (MaxSize - MinSize + 1)) + MinSize;
    }
    
    //▼使い方
    
    変数 = RandomInt(1,2)
    //変数 = 1 or 2
    
    変数 = RandomInt(1,2) * 10
    //変数 = 10 or 20
    
    変数 = RandomInt(1,9) * 0.1
    //変数 = 0.1 ~ 0.9
    
[/code]

上記functionを別途記述しておいて都度呼び出すとかどうでしょうか。  
同じJavascriptの自身の記述なのでよっぽど動作すると思いますが、Adobe
Illustrator用のJavascriptなので動作しなかったらすみません。

以下ネットから抜粋  
(<https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Math/random>)  
Math.random()は 0 以上 1 未満 (0 は含むが、 1 は含まない) の範囲で浮動小数点の擬似乱数を返します。  
ユーザーが初期シードを選択、またはリセットすることは出来ません。


CC BY-SA 4.0
2022-06-08T04:48:45.767
89286
2022-06-08T04:48:45.767
51823
89273
answer