在多个地方使用相同的随机数 (JavaScript)答案

【问题标题】：Using the same random number in multiple places (JavaScript)在多个地方使用相同的随机数 (JavaScript)
【发布时间】：2016-04-15 02:05:59
【问题描述】：

我正在创建一个随机报价生成器，该生成器应该给你一个随机报价以及说它的人，但我创建了两个单独的数组，因为它可以更容易地编辑稍后页面。第一个数组包含引用本身，第二个数组包含说它们的人的名字。我想生成一个随机数，然后将其用作两个数组的索引，从而得到一个随机引用和相应的说它的人。

我尝试的第一件事是：

var randomIndex = function() {
  return Math.floor(Math.random() * quotes.length);
};

button.addEventListener("click", function(){
  quoteBox.textContent = '"' + quotes[randomIndex()] + people[randomIndex()] + '"';
});

但这给了我两个不同的随机数（因为我调用了两次函数，我想）。然后我尝试将随机数设置为一个变量并将其用作索引，但除非我刷新页面并且我希望它在单击按钮时更改，否则它不会改变。我想做的事可能吗？

【问题讨论】：

你在监听函数里面设置变量了吗？还是什么？

标签： javascript arrays function random

【解决方案1】：

我建议不要维护两个数组，而是使用一个存储对象的数组，其中包含您需要在引用中使用的键值对。见下文。

var quotes = [{
  quote: 'something something darkside',
  person: 'family guy sith lord'
}, {
  quote: 'something something evil',
  person: 'family guy sith lord'
}, {
  quote: 'blah blah blah',
  person: 'foobar'
}];

var
  quoteEl = document.querySelector('#quote'),
  personEl = document.querySelector('#person'),
  button = document.querySelector('#button');

button.addEventListener("click", getQuote);

getQuote();

function getQuote() {
  var quote = quotes[randomIndex(quotes.length)];
  quoteEl.innerHTML = quote.quote;
  personEl.innerHTML = quote.person;
}

function randomIndex(max) {
  return Math.floor(Math.random() * max);
};

blockquote {
  padding: .5em;
  margin: 1em;
  background: #eee;
  border-left: 1em solid #aaa;
  color: rgba(37, 37, 37, .87);
}
#person {
  text-decoration: none;
  color: rgba(37, 37, 37, .87);
}
#person::before {
  content: ' -- ';
}
#person:hover {
  text-decoration: underline;
}

<blockquote>
  <p id="quote"></p>
  <footer>
    <a href="#" id="person"></a>
  </footer>
</blockquote>
<button id="button">get a random quote
</button>

【讨论】：

【解决方案2】：

试试这个:)

var randomIndex = function() {
  return Math.floor(Math.random() * quotes.length);
};

button.addEventListener("click", function(){
  var index = randomIndex();
  quoteBox.textContent = '"' + quotes[index] + people[index] + '"';
});

【讨论】：

【解决方案3】：

不要使用 2 个用于引用和人员的数组，而是使用唯一的对象数组，每个对象有 2 个成员 quote 和 people。

var quotes = [
    {quote: 'The quote text', author: 'Its author'},
    {quote: 'A second quote text', author: 'The 2nd author'},
    // ...
];

button.addEventListener("click", function(){
  var quote = quotes[randomIndex()];
  quoteBox.textContent = '"' + quote.quote + quote.index + '"';
});

【讨论】：

【解决方案4】：

尝试在您的点击处理程序中调用randomIndex。

button.addEventListener("click", function(){
  var random = randomIndex();
  quoteBox.textContent = '"' + quotes[random] + people[random] + '"';
});

这将在每次点击处理程序运行时分配一个新索引，但将使用相同的索引来访问quotes 和people。

【讨论】：