Can someone correct my javascript code? (Free code camp)

Question

I'm learning javascript from free code camp in general. Currently doing the question on generating a random quote. I'm not sure why it's not updating when i click my button. Can someone take a look and comment on it?

http://codepen.io/NateAlcedo/pen/mOdBzZ

Here's my script

$(document).ready(function() {
  var url = "http://api.forismatic.com/api/1.0/?method=getQuote&lang=en&format=json";
 // on click event, obtain an instance of the data from api
  $("#buttonGenerator").on("click", function() {
    $.getJSON(url, function(data){
    $("#quote").html(data.quoteText);
      $("#author").html(data.quoteAuthor);
    });
  });
});

This looks more like jquery than javascript. also, please show your HTML so we can verify your handlers. — rob, Nov 04 '16 at 13:36
Look in your javascript console. `XMLHttpRequest cannot load` — Turnip, Nov 04 '16 at 13:37
Do you get errors in the Console? (F12 is your best friend while writing Javascript/Jquery) — Cagy79, Nov 04 '16 at 13:37
if you looked at the console you would see this: `XMLHttpRequest cannot load http://api.forismatic.com/api/1.0/?method=getQuote&lang=en&format=json. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://s.codepen.io' is therefore not allowed access.` — Kevin Kloet, Nov 04 '16 at 13:37
@rob jQuery IS JavaScript. jQuery is the library, JavaScript is the language. — 4castle, Nov 04 '16 at 13:38
@4castle Yes, and squares are rectangles. But if I told you to build me a rectangle house and you made me a square I might be unhappy. This question was not tagged as jquery when I made my comment and asking for a purely javascript answer but using jquery in the example is confusing. — rob, Nov 04 '16 at 13:39
When you check localhost, there are erros too. Sometimes: `Syntax erorr: JSON.parse: bad escaped character ...` So not all the times will get back jsonobject. And for me, for some reason it never reach the success callback in the `getJSON` — vaso123, Nov 04 '16 at 13:47
This works now you fixed the CORS access: `$("#quote").html(data.contents.quotes[0].quote);` http://codepen.io/anon/pen/JbjLBg?editors=1111 — mplungjan, Nov 04 '16 at 13:52

score 1 · Accepted Answer · answered Nov 04 '16 at 15:30

Found out about jsonp api offered by forismatic. Thought you might still achieve what you started with.

You might want to see CORS.

Due to this access control, jsonp API comes into picture.

your code is fine (just had to find the correct API for our needs!)

$(document).ready(function() {
    var url = "http://api.forismatic.com/api/1.0/?method=getQuote&lang=en&format=jsonp&jsonp=?";
    // on click event, obtain an instance of the data from api
    $("#buttonGenerator").on("click", function() {
        
        $.getJSON(url, function(data){
            $("#quote").html(data.quoteText);
            $("#author").html(data.quoteAuthor);
        });
    });
});

    <html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
        <script type="text/javascript" src="script.js"></script>
    </head>
    <body>
    <div class="jumbotron text-center">
        <h1 style="color: #1287A8">
            Random Quote Machine
        </h1>
        <hr size="" />
    </div>
    <div class="container">
        <div class="row">
            <!--Left button-->
            <div class="col-md-2">
                <button id="buttonGenerator"type="button" class="btn btn-info">
                    <p id="buttonText">Generate Quote</p>
                </button>
                <br />
                <br />
                <button id="buttonTwitter"type="button" class="btn btn-info buttons">
                    <p id="buttonText">Tweet out!</p>
                </button>
            </div>
            <!--End of button-->
            <!--Text box-->
            <div class="col-md-9">
                <span id="quotations"><em><i>"</i></em></span>
                <p id="quote"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
                    dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                <p class="pull-right"><span style="font-size: 20px">-</span> <i id="author"> George Washington</i></p>
            </div>
            <!--End of Text Box-->
        </div>
        <!--End of Container-->
        <!--Footer-->
        <footer>
            <p>Done By Nathaniel D Alcedo Jr</p>
        </footer>
        </div>
    </body>
    </html>

Please accept if found useful.

Thank you so much! I wasn't sure what was going on. At least I learned something new today. Cheers! — , Nov 05 '16 at 06:18
I too learned from it. And the quotes being returned by this api are quite amazing. — inaitgaJ, Nov 05 '16 at 06:42

Can someone correct my javascript code? (Free code camp)

1 Answers1