I’m on the challenge where I have to build a random code generator. In addition to displaying the quote, I also want the button’s text to change after it gets clicked for the first time. Here is the JavaScript I’ve written so far:
$(document).ready(function() {
$("#show-quote").on("click", function(event) {
$.getJSON("https://random-quote-generator.herokuapp.com/api/quotes/random",
function(data) {
$(".quoteItself").html(data.quote);
$(".whoSaidThis").html(data.author);
$("#show-quote").html("Press for another quote");
});
});
});
For some reason, the above code absolutely fails to work, and I can’t figure out why. When the button is clicked, nothing happens. Could this be something to do with the syntax of the script? Sorry about this, this is (for all practical purposes) the first time I deal with APIs. For completeness, here is the HTML of the challenge:
<html>
<body>
<div class = "container">
<div class = "text-center title">
<h1> A random quote generator, coming soon.</h1>
</div>
<div class="row">
<div class="col-sm-6 col-md-6 col-lg-6 offset-md-3">
<!-- The actual quote displayer starts here... -->
<div class="card" id="quote">
<blockquote class="quoteItself">
Some famous quote will eventually appear here.
<footer class="whoSaidThis"> According to this person.
</footer>
</blockquote>
</div>
<!-- ... and ends here.-->
</div>
</div>
<!-- Here begins the div that holds the generate-quote button and any social media icons. -->
<div class="row">
<div class="col-sm-2 col-md-2 col-lg-2 offset-md-5">
<button class="btn btn-default center-block" id="show-quote"> Press Here for Quote </button>
</div>
</div>
</div>
</body>
</html>