Random Quote Machine testing help

Hello. I am trying to build my random quote machine, but am first trying with a different API to get a feel for how to do it, as I did not get how to use JSON too well, even after a lot of googling. So my problem is that I am trying to get “The quote will be here” to change in an element from the Star Wars JSON, but it doesn’t respond.

I see two problems.

  1. You didn’t load jQuery. Go to settings/javascript/quick-adds. You need JQ before Bootstrap, so remove BS, then add JQ and then BS.

  2. Your code:

$("#plm").on("click",function() {

targets and element with the id of “plm” (it is id because of the “#”). But nothing has that id. Your button has that as a class, but no the id. The simplest solution is to add an id of “plm” to the button.

When I do these two things, it works.

These were easy things to see in the console. The jQuery error popped up immediately and putting a console.log in the click handler told me it wasn’t being fired. Learn to user your console, something linke ctrl-shft-j to open.

And I’d seriously reconsider those colors. Excuse me, I have to go ice my retinas. :wink:

Oh yeah, and you expressed difficulty with JSON. Really the issue is AJAX, but I hear ya. That is a difficult subject. Keep at it and it will get easier.

Yeah, can’t really say I took my time with the design:laughing:

I noticed that I accidentally put plm as a class, right after posting, so I just added a “button” id. When adding jquery and then Bootstrap, I noticed that the layout of the page changes, and is is not displayed in columns anymore. Also, the button doesn’t work still.

Can you take a look?

Also, I see this in the console:

Failed to load https://swapi.co/api/people/4: Redirect from ‘https://swapi.co/api/people/4’ to ‘https://swapi.co/api/people/4/’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘https://s.codepen.io’ is therefore not allowed access.

Should I try another API?

With regards to format, I think you also need to add BS to CSS. And I think you are coding for BS3, not BS4.

I will look at the API. CORS is a pain, for sure.

I’m not getting that CORS error.

Figured out the layout. But I am still getting the loading error.

I’m not understanding what error you’re seeing. I get none. I like to simplify things when I’m confused. Do you still get the error when you run this? I get some CORS errors for codepen fonts (which I think is a codepen problem right now) but the data comes back fine.

Yes, when I press the quote button, the error appears in the console.

When you run the pen that I linked to?

Try a different browser?

Or let me put it this way - please cut and paste the exact code you are using, the exact output to the console, and tell us what computer and browser you are using.