クリック機能が配列に複数のランダムなインデックスを適用できないのはなぜですか？

Question

私は初心者です。私はフリーコードキャンプでランダムな見積り機プロジェクトに取り掛かりました。私はランダムな引用符と色を生成することができますが、それらはclickイベントを使用して一度だけ生成されます。それ以降の「新しい見積もり」ボタンをクリックすると、色と引用符の配列の新しいランダム索引が生成されます。

var quote = ["It is not the size of the dog in the fight, but the size of the fight in the dog.-Archie Griffen", "Nothing lasts forever. Not even your troubles.-Arnold H Glasgow", "There are only two ways to live your life. One is as though nothing is a miracle. The other is as though everything is a miracle-Albert Einstein"]; 

// problem area 
var col = ["red", "blue", "yellow", "pink", "brown"]; 
var i = Math.floor(Math.random() * col.length); 
var j = Math.floor(Math.random() * quote.length); 

$(document).ready(function() { 
    $("button").click(function() { 
    $(".quote-window").html(quote[j]); 
    $("body").css("background-color", col[i]); 
    }); 
}); 

Answer 1

あなたは<button>クリックハンドラに変数iとjを計算する必要があります。

Answer 2

var quote = ["It is not the size of the dog in the fight, but the size of the fight in the dog.-Archie Griffen", 
 
    "Nothing lasts forever. Not even your troubles.-Arnold H Glasgow", 
 
    "There are only two ways to live your life. One is as though nothing is a miracle. The other is as though everything is a miracle-Albert Einstein" 
 
]; 
 
var col = ["red", "blue", "yellow", "pink", "brown"]; 
 

 
$(document).ready(function() { 
 
    $("button").click(function() { 
 
    var i = Math.floor(Math.random() * col.length); 
 
    var j = Math.floor(Math.random() * quote.length); 
 
    $(".quote-window").html(quote[j]); 
 
    $("body").css("background-color", col[i]); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button>Click Me</button> 
 
<div class='quote-window'></div>

あなたはクリック機能外 iと j変数を取得し、それらを変更することはありません。そのため、ボタンをクリックすると、 jと iにはすでに値があり、変更されません。

これらの変数宣言をclick関数内に追加します。以下を参照してください

ランダムに生成された数字が以前に生成された数字と同じである可能性があります。しかし、あなたは以下のコードで非常に良い出発点を持っています。

var quote = ["It is not the size of the dog in the fight, but the size of the fight in the dog.-Archie Griffen", "Nothing lasts forever. Not even your troubles.-Arnold H Glasgow", "There are only two ways to live your life. One is as though nothing is a miracle. The other is as though everything is a miracle-Albert Einstein"]; 
 

 
// problem area 
 
var col = ["red", "blue", "yellow", "pink", "brown"]; 
 

 

 

 
$(document).ready(function() { 
 
    $("button").click(function() { 
 
    var i = Math.floor(Math.random() * col.length); 
 
    var j = Math.floor(Math.random() * quote.length); 
 
    $(".quote-window").html(quote[j]); 
 
    $("body").css("background-color", col[i]); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button> 
 
    Click 
 
</button> 
 
<div class="quote-window"> 
 

 
</div>