Random Quote Machine with Vanilla Javascript

I’m struggling with the Random Quote Machine. I’m trying to sort it out with vanilla JavaScript, but I can’t seem to get it to work. Here is the codepen. Any thoughts on the code?

I’m using the XMLHttpRequest documentation and the Quotes on Design API.

Hi, you have a syntax error on line 5 of your js

quoteButton.addeventListener (“click”, function()

it should be :

quoteButton.addEventListener (“click”, function()

(notice the Capital ‘E’ )

also try running your codepen in http instead of https, when I did that I saw your code write out the raw json which contained the info you need :slight_smile:

Nice! Thank you!

What’s up with running codepen in http rather than https? I understand that you need a special header in http to make cross-domain calls, but I don’t get what that has to do with the code working with http rather than https.

The API seems to be called several times, but it returns the same content each time; this is weird, the API has a random filter built into it. What this means is that each time the New Quote button gets hit, the same content is placed in the quote text.

Any idea how to get a random quote from the API each button click?

edit: clarity.

Generally speaking it is for security reasons, so you don’t go and request malicious files or upload malicious files.
The header you are talking about is the “Access-Control-Allow-Origin”. Here is a nice StackOverflow post explaining all of that if you want to get deeper into it : http://stackoverflow.com/a/10636765

The alternative to https would to use a cross origin proxy such as https://crossorigin.me
So your request string would look something like this: “https://crossorigin.me/” +yourRequestURL

Personally I would just switch to a different API that works than deal with all of the above.

If you search for Random Quote machine on codepen you will get tons of different ways and API’s
to work for you without having all.

1 Like