Using the same random number in multiple places (JavaScript)

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?

Did you set the variable inside the listener function? Or what? — Jean-Baptiste Yunès
– Jean-Baptiste Yunès, Commented Jan 10, 2016 at 19:57

Steven Schobert · Accepted Answer · 2016-01-10 20:04:01Z

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.

edited Jan 10, 2016 at 20:04

Steven Schobert

4,2793 gold badges27 silver badges34 bronze badges

answered Jan 10, 2016 at 19:58

Sachin

1,2181 gold badge10 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

cFreed · Accepted Answer · 2016-01-10 20:04:02Z

0

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 + '"';
});

answered Jan 10, 2016 at 20:04

cFreed

4,4641 gold badge26 silver badges35 bronze badges

Comments

Fahim Farook · Accepted Answer · 2016-01-10 20:04:37Z

0

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] + '"';
});

answered Jan 10, 2016 at 20:04

Fahim Farook

1,4812 gold badges15 silver badges39 bronze badges

Comments

synthet1c · Accepted Answer · 2016-01-10 20:16:22Z

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>

Collectives™ on Stack Overflow

Using the same random number in multiple places (JavaScript)

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related