Random quote machine with jQuery

I am stuck and confused in the random quote machine using JQuery. I would have loved to use React but I am still at the nascent stages of learning it.

I get the reference error message that $ is not defined and the button does not work!

Here is the link https://codepen.io/freeCodeCamp/pen/MJjpwO

Hello~!

Unfortunately the link you provided leads to the FCC Test Suite pen. We need the link to your CodePen to view your code and assist you. :slight_smile:

Thanks for your prompt reply.

The link is here https://codepen.io/greatbyte/pen/GRpVPQO


The first thing you need to do is add jQuery to your pen. Click the gear above your JS box and add jQuery there.

I’ve added jquery to the Pen but the new quote button is not working. The quotes stored in the array does not function. I am confused about the whole thing!

  1. You need to set the content for the text and author elements, you can use the text() method $('#someId').text(stringValue)

  2. You don’t need the loop.

  3. You won’t be able to see the text because it is a white color on a white background.

You can read the jquery documentation here. In addition to @lasjorg’s comment above, you are calling getQuote just before the event listener.
What is it for? This $("#new-quote").click(getQuote) is enough.

Isn’t that just for the first page load, so it has a quote on first load?

Thanks so much for your input. i am a newbie and I fail to comprehend everything. Please see the Pen for the updates! Thank you very much!

The code you had inside the loop was correct, you just didn’t need to loop. Add that code back so you get the quote and author and save them in variables like you did before.

Then set the text content of each of the elements using the method like you are now but passing in the variables with the quote and author you got from the array.

$("#text").text(quoteFromArray);
$("#author").text(authorFromArray);

First of all, thank you very much for your insights. I’ve learned a lot from this thread. However, I have a few questions before I grasp the nitty-gritty of the project:

  1. Why didn’t I need to loop?
    2.How do I get the text and author IDs to appear on first load?

Once again, thank you!

  1. You didn’t actually use the loop for anything, you were not looping the array. The index for the array was generated using Math.random and the array length.

  2. You can do what you did before, just call the function one time on the first load.

1 Like

I am very grateful for your assistance. It will help a great deal in my quest to become literate in web development.

1 Like

Glad to help, if you need more help, or have any questions, just ask.

Happy coding!