Using the same random number in multiple places (J

Question

I'm creating a random quote generator that is supposed to give you a random quote along with the person who said it, but I've created two separate arrays because it'll make it easier to edit the visual aspects of the page later on. The first array has the quote itself and the second array has the names of the people who said them. I would like to generate one random number and then use that as my index on both arrays, thus getting a random quote and the corresponding person who said it.

The first thing I tried was this:

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

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

But that gives me two different random numbers (because I'm calling the function twice, I suppose). I then tried setting the random number to a variable and using that as the index, but that doesn't change unless I refresh the page and I want it to change on the click of a button. Is what I want to do possible?

Answer 1

I would suggest instead of maintaining two arrays use one that stores objects with key value pairs of what you need to use in the quote. see below.

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>

Answer 2

Instead of having 2 arrays for quotes and people, use a unique array of objects, each one having 2 members quote and 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 + '"';
});

Answer 3

Try calling randomIndex inside your click handler.

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

That will assign a new index each time the click handler runs, but will use the same index to access both quotes and people.

Answer 4

Try this :)

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

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