skip to Main Content

So i am creating a Star Wars inspired random quote generator on vscode which gives a random quote and also gives a real life scenario in which it could be used (advice), but i have encountered an issue which should be simple enough to fix.

I have two different arrays, a ‘quotes’ array and a ‘advice’ array. When i call one of the quotes at random from ‘quotes’ array, i want that quote that appeared, to trigger a corresponding line from the ‘advice’ array so that they appear together. For example quote ‘1’ pairs with advice ‘1’. I managed to get to the point where when i press the ‘Get Quote’ button on my site, it triggers a random quote as it should, but also a random line of advice rather than the one i would like to appear.

How can i pair a quote from one array with an advice from the other array, and when the random quote is called, also have the advice that pairs with it, also output to the page?
Hope i have explained this well enough, first time posting. Thanks in advance. JavaScript Code Blow.

let btn = document.getElementById("btn");
let output = document.getElementById("output");
let quotes = [
  /*1*/ '"Its not my fault." - Han Solo',
  /*2*/ '"Your focus determines your reality." - Qui-Gon Jinn',
  /*3*/ '"Do. Or do not. There is no try." - Yoda',
  /*4*/ '"Somebody has to save our skins." - Leia Organa',
  /*5*/ '"In my experience there is no such thing as luck." - Obi-Wan Kenobi',
  /*6*/ '"I find your lack of faith disturbing." - Darth Vader',
  /*7*/ '"Ive got a bad feeling about this." - Basically Everyone',
  /*8*/ '"Its a trap!" - Admiral Ackbar',
  /*9*/ '"So this is how liberty dies...with thunderous applause." - Padmé Amidala',
  /*10*/ '"Your eyes can deceive you. Dont trust them." - Obi-Wan Kenobi',
  /*11*/ '"Never tell me the odds." - Han Solo',
  /*12*/ '"RWAAARWWR!" - Chewbacca',
  /*13*/ '"Stay on target." - Gold Five',
  /*14*/ '"This is a new day, a new beginning." - Ahsoka Tano',
  /*15*/ '"This is the way." - The Mandalorian',
];

let advice = [
  /*1*/ "Use when anything goes wrong, even if it is totally your fault.",
  /*2*/ "Use in pep talks to encourage positivity and to remind others to take control of their fate.",
  /*3*/ "Use when someone needs a little tough love.",
  /*4*/ "Use when you jump in and solve a problem without breaking a sweat.",
  /*5*/ "Use to remind others hard work pays off and sitting around waiting for chance does not.",
  /*6*/ "Use anytime others doubt your plans.",
  /*7*/ "Use when walking into a situation that could end poorly.",
  /*8*/ "Use anytime you suspect something is too good to be true.",
  /*9*/ "Use sarcastically whenever anyone institutes a new policy that looks appealing on the surface but has negative repercussions.",
  /*10*/ "Use when a friend needs to be reminded to go with his or her gut feeling.",
  /*11*/ "Use whenever you are told a task cant be done.",
  /*12*/ "Use when you move a chair",
  /*13*/ "Use to keep yourself or others focused.",
  /*14*/ "Use to cheer a pal up and remind him or her that every day brings new opportunities.",
  /*15*/ "Use when one makes the right decision",
];

// combine quote and advice
// commit changes to git
btn.addEventListener("click", function () {
  var randomQuote = quotes[Math.floor(Math.random() * quotes.length)];
  var randomAdvice = advice[Math.floor(Math.random() * advice.length)];
  output.innerHTML = randomQuote + "<br>" + randomAdvice;
});

I tried assigning quote 1 to advice 1 like so

quote[0] = advice[0];

And so on and soforth, however this just replicated the quote twice instead of asigning advice 1 to quote 1.

2

Answers


  1. the line that generate random index (Math.floor(Math.random()...) is called twice, resulting you have different random index for each array. You need to assign the random index to a variable and use it after the assignment.

    Since the length for both the quote and advice are equal, then you can generate the random number using any of the array like below.

    let btn = document.getElementById('btn');
    let output = document.getElementById('output');
    let quotes = [
        /*1*/ '"Its not my fault." - Han Solo',
        /*2*/ '"Your focus determines your reality." - Qui-Gon Jinn',
        /*3*/ '"Do. Or do not. There is no try." - Yoda',
        /*4*/ '"Somebody has to save our skins." - Leia Organa',
        /*5*/ '"In my experience there is no such thing as luck." - Obi-Wan Kenobi',
        /*6*/ '"I find your lack of faith disturbing." - Darth Vader',
        /*7*/ '"Ive got a bad feeling about this." - Basically Everyone',
        /*8*/ '"Its a trap!" - Admiral Ackbar',
        /*9*/ '"So this is how liberty dies...with thunderous applause." - Padmé Amidala',
        /*10*/ '"Your eyes can deceive you. Dont trust them." - Obi-Wan Kenobi',
        /*11*/ '"Never tell me the odds." - Han Solo',
        /*12*/ '"RWAAARWWR!" - Chewbacca',
        /*13*/ '"Stay on target." - Gold Five',
        /*14*/ '"This is a new day, a new beginning." - Ahsoka Tano',
        /*15*/ '"This is the way." - The Mandalorian',
    ];
    
    let advice = [
        /*1*/ "Use when anything goes wrong, even if it is totally your fault.",
        /*2*/ "Use in pep talks to encourage positivity and to remind others to take control of their fate.",
        /*3*/ "Use when someone needs a little tough love.",
        /*4*/ "Use when you jump in and solve a problem without breaking a sweat.",
        /*5*/ "Use to remind others hard work pays off and sitting around waiting for chance does not.",
        /*6*/ "Use anytime others doubt your plans.",
        /*7*/ "Use when walking into a situation that could end poorly.",
        /*8*/ "Use anytime you suspect something is too good to be true.",
        /*9*/ "Use sarcastically whenever anyone institutes a new policy that looks appealing on the surface but has negative repercussions.",
        /*10*/ "Use when a friend needs to be reminded to go with his or her gut feeling.",
        /*11*/ "Use whenever you are told a task cant be done.",
        /*12*/ "Use when you move a chair",
        /*13*/ "Use to keep yourself or others focused.",
        /*14*/ "Use to cheer a pal up and remind him or her that every day brings new opportunities.",
        /*15*/ "Use when one makes the right decision",
    ];
    
    // combine quote and advice
    // commit changes to git 
    btn.addEventListener('click', function () {
        // store the random number to a variable instead of calling it twice
        const randomIndex = Math.floor(Math.random() * quotes.length);
    
        var randomQuote = quotes[randomIndex];
        var randomAdvice = advice[randomIndex];
        output.innerHTML = randomQuote + " " + randomAdvice;
    })

    Hope it helps

    Login or Signup to reply.
  2. Best approach here will be to use objects in order to pair specific question with answer. You can create array of objects where each object can contain specific quote and advice, something like this:

    let quotesArray = [
        {quote: '"Its not my fault." - Han Solo', advice: "Use when anything goes wrong, even if it is totally your fault."},
        {quote: '"Your focus determines your reality." - Qui-Gon Jinn', advice: "Use in pep talks to encourage positivity and to remind others to take control of their fate."},
        {quote: '"Do. Or do not. There is no try." - Yoda', advice: "Use when someone needs a little tough love."},
        {quote: '"Somebody has to save our skins." - Leia Organa', advice: "Use when you jump in and solve a problem without breaking a sweat."},
        {quote: '"In my experience there is no such thing as luck." - Obi-Wan Kenobi', advice: "Use to remind others hard work pays off and sitting around waiting for chance does not."},
        {quote: '"I find your lack of faith disturbing." - Darth Vader', advice: "Use anytime others doubt your plans."},
        {quote: '"Ive got a bad feeling about this." - Basically Everyone', advice: "Use when walking into a situation that could end poorly."},
        {quote: '"Its a trap!" - Admiral Ackbar', advice: "Use anytime you suspect something is too good to be true."},
        {quote: '"So this is how liberty dies...with thunderous applause." - Padmé Amidala', advice: "Use sarcastically whenever anyone institutes a new policy that looks appealing on the surface but has negative repercussions."},
        {quote: '"Your eyes can deceive you. Dont trust them." - Obi-Wan Kenobi', advice: "Use when a friend needs to be reminded to go with his or her gut feeling."},
        {quote: '"Never tell me the odds." - Han Solo', advice: "Use whenever you are told a task cant be done."},
        {quote: '"RWAAARWWR!" - Chewbacca', advice: "Use when you move a chair"},
        {quote: '"Stay on target." - Gold Five', advice: "Use to keep yourself or others focused."},
        {quote: '"This is a new day, a new beginning." - Ahsoka Tano', advice: "Use to cheer a pal up and remind him or her that every day brings new opportunities."},
        {quote: '"This is the way." - The Mandalorian', advice: "Use when one makes the right decision"},
    ];
    

    In randomQuotes array are stored objects with keys quote and advice. You can access to values of this object like this:

    // commit changes to git
    btn.addEventListener("click", function () {
      var randomQuoteObject = quotesArray[Math.floor(Math.random() * quotesArray.length)];
    
    
      output.innerHTML = randomQuoteObject.quote + "<br>" + randomQuoteObject.advice;
    });
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search