Random code generator: What is wrong with the script?

Random code generator: What is wrong with the script?
0

#1

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>

#2

Hello tarasovd0821,

Your code is working for me. Check your console for errors, maybe CORS if you are in localhost.

Regards.


#3

This seems to be working fine on my end, and I literally just copy/pasted your code directly into Codepen. If you’re using Codepen, did you remember to add Bootstrap and jQuery as external libraries in the settings’. Or if you’re working locally on Atom/Sublime etc. did you import the correct libraries? Try opening your browser’s developer console and see what error is popping up, that should give you an idea of what’s wrong.


#4

Thanks!

You’re right, I had added Bootstrap but not jQuery. Once I’ve added jQuery, it sort of works (the author is nowhere to be seen, but that’s a matter for another question, if I can’t figure it out on my own).


#5

And, I’ve got the author to appear by cutting the footer tag (where the author is contained) out of the blockquote tag and pasting it immediately below. I can see the author now–but is that the proper use of the footer tag in Bootstrap?


#6

The <footer> tag is actually not part of Bootstrap at all. Bootstrap is just a big library of CSS styles and a little bit of JavaScript. The <footer> tag, on the other hand is part of regular old HTML5. To be more specific, it’s a semantic tag, which is fancy talk for it’s a tag that behaves just like a regular <div>, but has a better name to denote meaning (“This div tag’s sole purpose is to act as a footer”). I don’t know why Codepen won’t update the footer content (it works fine when I run it locally), but regardless it’s bad technique anyway. I highly suggest you read up on HTML5 semantic tags here, they outline how and where you should be placing a footer tag, or in short you should only really have one page-level footer tag, thats the last major tag of that page, with its own content inside it, like a wrapper.