Problem with Random Quote Generator

Can anyone tell me what is wrong with my javascript code?



$(‘button’).on(‘click’, function({
// Function which gets the quotes from forismatic api

var getQuote = function()

  datatype: 'jsonp',
  // If the request is succesful
  success: function(data)
  	//Appending the authors name if any
  	if (data.quoteAuthor != '')
  //To handle errors
  error: function(xhr, status, error)
  	$(.'quote-box').html("I'm sorry but there was an error with the API request");


Here is the HTML file for the same

<!DOCTYPE html>
	<title>Random Quote Generator</title>
	<!-- To ensure compatability with various devices !-->
  	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  	<meta name="viewport" content="width=device-width">
	<!-- Including Amatic Google Font -->
	<link href='' rel='stylesheet'>
	<!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!-- Various stylesheets used -->
	<link rel="stylesheet" href=main.css>
	<!-- font-awesome for the heart !-->
  	<link rel="stylesheet" href="">
	<div class="text-heading text-center container">
	Random Quote Generator
	<div class="quote-box container">
	<div class="author-name container">
	<button class='btn paper btn-text container-fluid'>New Quote</button>
	<footer class="footer">
	<div class="container-fluid footer-text">
	Made with <i class="fa fa-heart" aria-hidden='true'></i> by Rahul Baboota
	<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src=""></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
    <!-- Including main.js -->
    <script src='main.js'></script>

Hey, what is the problem, what doesn’t work or does it do nothing? One thing I noticed: where you set the onclick event, you placed a $ before the function name. I suppose that shouldn’t be there.

I removed it and the code still doesnt work. And the problem I’m having is that when i click the button nothin happens.

I see your jQuery DOM selectors are wrong. You have $(.'author-name'), but that should be $('.author-name'). The dot of the class should also be between the quotes.

You may try to log what you get from server in the console for both success and fail cases (console.log(data))… If the query is executed. Is it ?

I did that too but still it isnt working

Ok, so what are the error messages ? you’re too vague for us to help…

The main error is that when I click on my “New Quote” button … nothing happens.
When I tried typing in getQuote() in my console…it showed an that getQuote is not defined.

Have a look at this. Same API, so this should work.

From looking at your code I think you’re calling the function getQuote() before it’s declared!

if it was
function getQuote(){


Then you can call it from anywhere in your script. Try placing var getQuote right to the top of the script. That’s the only thing I can see but I’m not an expert

Plus the other faults

$getQuote … not valid
$(.’.class’) not valid


I rectified all the mistakes pointed above and now when i click the button I get the error message. So I think there’s a problem with the API request?