Random Quote Machine - Why are quotes and author empty?

I got the buttons to work, but just wondering why my page doesn’t load with an initial quote and author?

The page won’t load initially because replaceMsg() get’s called before getQuote() has the chance to finish receiving quotes. To ensure that the message is replaced only when there are quotes to place in the boxes, call replaceMsg() at the end of the getJson() function.

Take a look at these edits to your codePen. Notice the changes to getQuote() and the “New Quote” button. Also note that getQuote() is now called at the end of the script.

1 Like

Thanks for the explanation! I see the difference!

I’ve made a few corresponding changes, but still no dice. Now that getQuote calls getJSON and then replaceMsg, when it get called inside the document ready, shouldn’t the quote & author get replace once the DOM loads? Updated

You need to put the replaceMsg() function at the end of the getJson() function, not outside of it. So you would place it just after the if statement.

To understand why this matters, read up on asynchronous networks calls and callbacks in JS. It is a major challenge of javascript development but there are a ton of resources and libraries to attempt to make it better. Callback Hell is a great article/site explaining some asynchronous problems of JS networking and proposes some fixes. Some if it will be complicated but the first few paragraphs in particular are interesting to think about.

Also, the API url you are using does not return anything to me anymore so the boxes only display Quote and Author…

1 Like

Thanks the callback article gave a pretty good at what was going wrong. Combining that with something else I read I think I might’ve been creating a new JQuery object the way I had it before…

Forismatic has issues with their API and it’s known to randomly not work sometimes. It’s working for me now.