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.
-
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.
-
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. 
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.