I am stuck on Random Quote Machine

I am stuck on Random Quote Machine
0.0 0

#1

Hello Mate,
I am trying to binding JSON data on quote button but it does not work. If any help pls.
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="

" + quote + “

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

});
});
});


#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 );
});
});
});


#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