Random Quote Machine: ....officially stuck!

Code Feedback
1

Hi to all!

I am working on the random quote machine project, but without success so far… Even though I 've read most of the topics and tried to implement a similar solution, it still doesn’t work… Needless to say that I am a total n00b on this!

This is my codepen source. Could you please enlighten me as to what am I doing wrong?
Random Quote Machine

Thanks!

2

I got stuck looking at your code too. The first thing I did was I got rid of the “onclick=‘getQuote()’” attribute in your button. Since you’re working with a js page, just build that function within the js page. So inside your $(document).ready(function(){}, I put a click event.

$("button").on("click", function() {

Inside the click event is where I put your ajax

$.getJSON("http://blahblah.com", function(json) {

You grabbed the data from the API perfectly, and stored the information inside a variable. You just want to do something with those variables inside the getJSON success function.

var text = json.quoteText;
var author = json.quoteAuthor;
$("#quote").html(text);
$("#author").html(author);

Just remember that when using .html, your variables “text” and “author” go in parenthesize, not placed after a period.

After that, all you need to do is close .getJSON, .on(“click”), and .ready and it should work. If you have any questions, or if none of this made sense, shoot me a message and I’ll try to explain it better

1 Like
3

First of all, many thanks for taking the time to reply! :slight_smile: Much appreciated! I followed your instructions and came up with this:

$(document).ready(function(){
    $("button").on("click", function() {
    $.getJSON('http://api.forismatic.com/api/1.0/?method=getQuote&format=jsonp&lang=en&jsonp=?', function(json){
        var author = json.quoteAuthor;
        var text = json.quoteText;
        $("#quote").html(text);
        $("#author").html(author);
    });
});
})

And it works like a charm! Again, many thanks! :slight_smile:
I have 2 more issues:
a) While the page loads, there is no quote displayed. I checked this out, but it seems that all is by the book. Any idea where the problem might be?
b) I am also interested in creating an effect that will change the background image when user presses the “New quote” button. How could I achieve that?

Thanks!

4

Ok, I found a different solution for (b) (I managed to do it, but the result didn’t meet my taste eventually), so I tried something else.

Problem with (a) remains and with no apparent reason… Suggestions?

Thank you!

5

Sorry, I just saw this. You’ve made a lot of great progress since yesterday!

Try copying the $.getJSON and pasting it OUTSIDE of the click event (this means you’ll have two $.getJSONs, one inside the click event and one outside) and see what happens.

1 Like
6

Forgive me for getting back to this so late, but I had some other pressing issues that kept me really busy!
Many thanks for the reply and yes, it works like a charm! :slight_smile:
Couldn’t finish it without your help! :slight_smile:

1 Like