I am stuck on Random Quote Machine

I am stuck on Random Quote Machine
0
#6

Remember to format your code when you post here, especially if it contains HTML code. The forum editor uses HTML to format posts. That’s why the <p> tags in your post were not visible.

#7

How can I format my code for the HTML?

#8
#9

$(document).ready(function(){
$("#nextQuote").on(“click”,function getData(quote,author){
$.getJSON(“http://api.forismatic.com/api/1.0/?method=getQuote&lang=en&format=jsonp&jsonp=?", function(json) {
quote = json.quoteText;
author = json.quoteAuthor;
< $(”.quoteText").html("

" + quote + “

”); >
$(".quoteAuthor").html("-" + author + “”);

});
});
});

#11

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

1 Like
#12

@fotonist @mikeale03 I’m pretty sure some HTML code are lost in your posted code.

Try typing 3 backticks (the character that looks like an apostrophe), then press Enter twice.
Then type 3 backticks again. Then type the code in between.

Example

```

$(document).ready(function(){
$("#nextQuote").on(“click”,function getData(quote,author){

```

It should look like this:

$(document).ready(function(){
$("#nextQuote").on("click",function getData(quote,author){
...


#13

Ok now I learned. Here is my code:

$(document).ready(function(){
$("#nextQuote").on("click",function getData(quote,author){
$.getJSON("http://api.forismatic.com/api/1.0/?method=getQuote&lang=en&format=jsonp&jsonp=?", function(json) {
    quote = json.quoteText; 
    author = json.quoteAuthor;  
  $(".quoteText").html("<p>" + quote + "</p>");  
  $(".quoteAuthor").html("<em>-" + author + "</em>");   
    
});
});
});


#14

@kevcomedia thanks!



$(document).ready(function() {
 $("#nextQuote").on("click",function getData(quote,author){
 $.getJSON("http://api.forismatic.com/api/1.0/?method=getQuote&lang=en&format=jsonp&jsonp=?", function(json) {
var quote = json.quoteText; 
var author = json.quoteAuthor;
$(".quoteText").html("<p>"+ quote+"<p>" );
$(".quoteAuthor").html( "-"+ author +"-" );
});
});
});

#15

I think this works. :thumbsup:

Just add the var keyword on the lines where you set the text and author.

var quote = json.quoteText; 
var author = json.quoteAuthor;
#16

@kevcomedia, nothing changed. Will you see my project code?

https://codepen.io/fotonist/pen/YGpvvZ

#17

That’s weird :confused:. It was working a while ago.

I inserted a console.log in the callback. Nothing gets printed to the console when I click the button. It seems the API call fails.

#18

CORS. :confused:

#19

I opened the pen on http. It works now.

#20

How does it work? I do not find out where is my mistake :confused: Because it still does not work :expressionless:

#21

You are probably viewing your pen on https. View it with this url

http://codepen.io/fotonist/pen/YGpvvZ?editors=0011

#22

It may be better to change the API call to "https://crossorigin.me/http://api.forismatic.com/api/1.0/?method=getQuote&lang=en&format=jsonp&jsonp=?". It’s a hack, but at least users won’t have to think about whether they’re connected securely or not.

#23

ohhh my goodness! you right man :slight_smile: it is my browser. Now works. Thank you so much my friend :slight_smile: you are very helpful.

#24

By the way I appreciate also @mikeale03 . Thank you very much for your help.

#25

Hey guys,

I think I am experiencing some problem with CORS or maybe some with my code. Can you help me with some tips or something so I can “un-stuck”?
In the console I have the message: XMLHttpRequest cannot load, The ‘Access-Control-Allow-Origin’ header has a value ‘http://null’ that is not equal to the supplied origin. Origin ‘null’ is therefore not allowed access.

Thanks a lot guys

EDIT 1 I changed my API and it worked. Thanks for the responses above! I appreciate any inputs. Thanks a lot

    function output(){
$.getJSON("http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&_jsonp=mycallback", function(a) {
        
        $("#quote").html(a[0].content);
        $("#quoted").html(a[0].title);
                        })};
        
       $("#getQuoteButton").click(output());

EDIT 3

#26

similar:
$.getJSON(“http://api.forismatic.com/api/1.0/?method=getQuote&lang=en&format=jsonp&jsonp=?",function(json){
quote = json;
$(”#quote").html(quote.quoteText);
$("#quoteAuthor").html(quote.quoteAuthor);
});