I am stuck on Random Quote Machine

I am stuck on Random Quote Machine
0
#2

can you share your codepen link?

#3

<a href:“https://s.codepen.io/fotonist/debug/YGpvvZ”>Here is the link. I think the link does not work:

#4

.html is a function, so put the quote in parentheses.

$(".quoteText").html("<p>" + quote + "</p>");

Also, prefix quote and author with the var keyword.

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

I did like you showed
quote = json.quoteText;
author = json.quoteAuthor;

#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.