为什么点击函数无法将多个随机索引应用于我的数组

Question

我被困在 Free Code Camp 的随机报价机项目上。我可以生成随机引号和颜色，但它们仅使用点击事件生成一次。随后单击“新报价”按钮会为我的颜色和报价数组生成新的随机索引。

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。

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>

Answer 2

您在点击函数之外获得了 i 和 j 变量，并且永远不会更改它们。这就是为什么当您点击按钮时，j 和 i 已经有了值并且它们不会改变。

在点击函数中添加这些变量声明。见下文

随机生成的数字有可能与之前生成的数字相同，要确保这种情况不会发生，还有一些工作要做。但是你有一个很好的起点，下面的代码。

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>

为什么点击函数无法将多个随机索引应用于我的数组

Why is the click function unable to apply more than one random index to my arrays

jquery

jquery-events