Problem with Random Quote Generator

1

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

`$(document).ready(function(){

getQuote();

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

var getQuote = function()
{
$.ajax({

  url:'http://api.forismatic.com/api/1.0/?method=getQuote&format=jsonp&lang=en&jsonp=?',
  datatype: 'jsonp',

  // If the request is succesful
  success: function(data)
  {
  	$(.'quote-box').html(data.quoteText);

  	//Appending the authors name if any
  	if (data.quoteAuthor != '')
  	{
  		$(.'author-name').html(data.quoteAuthor);
  	}
  	else
  	{
  		$(.'author-name').html("Unknown");
  	}
  }

  //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>

<html>
	<head>

	<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='http://fonts.googleapis.com/css?family=Cabin' 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="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css">
	</head>

	<body>

	<div class="text-heading text-center container">
	Random Quote Generator
	</div>

	<div class="quote-box container">
	</div>

	<div class="author-name container">
	</div>

	<div>
	<button class='btn paper btn-text container-fluid'>New Quote</button>
	</div>

	<footer class="footer">
	<div class="container-fluid footer-text">
	Made with <i class="fa fa-heart" aria-hidden='true'></i> by Rahul Baboota
	</div>
	</footer>

	<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></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>

	</body>

</html>
2

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.

3

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

4

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.

5

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 ?

6

I did that too but still it isnt working

7

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

8

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.

9

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

10

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

etc

12

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?