I am having trouble with my random quote machine.
I tried to use the same format they used in the challenge “Get JSON with the jQuery getJSON Method” but it doesn’t seem to be working for me.
Here is the link for my project where you can see me code.
Project Link - https://codepen.io/stefankenyon/pen/VWExPm
Thanks!
try this in html, let me know if it works:
< body >
< p id = “quote” >
The quote will go here
< /p >
< div id=“getQuote”>Click Here< /div >
< /body >
and in Javascript this:
$(document).ready(function() {
$.getJSON(“https://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1”, function(json) {
$("#getQuote").html(JSON.stringify(json));
});
});
Exclude the spacing I did just to show you the code.
EDITED!!!
Try this:
The problem was that even though you were doing a call on the element in your original call, you needed to wrap it inside a function and call that function like I did inside your html.
Make sure that at end of closing ) you have a semicolon.
or like that, yet I doubt he will get how this works, unless you link the javascript file expicitly (I think).
It still doesn’t work for me.
Why did they not need to do that in “Get JSON with the jQuery getJSON Method” challenge?
That also didn’t solve the problem.
In his HTML
id="getQuote"
JavaScript:
$(".quote")
And according to this (https://quotesondesign.com/api-v4-0/) You need to acces the response array like this:
$("#quote").html(json[0].content);
no…never $(".quote") unless you use class=“quote”,
if you uses id=“getQuote” say,
$("#quote").
you can not apply a class selector with value A to an element you use id with value A. No error will be thrown it just would not work.
meaning < ELEMENT id=“bla” >< /ELEMENT >
should be accessed via javascript as document.getElementById(‘bla’) or $("#bla")
You can not however do this:
< ELEMENT class =“bla” >< /ELEMENT >
document.getElementById(‘bla’)
if you want to access it you either write: Document.getElementsByClassName(‘bla’) or $(’.bla’)
stephan your quickest remedy is to post your html and your js here as they are now.
As I learned codepen automatically links your javascript files for you( ok).
So, as lonk as you have the javascript as you did and your javascript onready is correct as one of the users here showed , it will work. There is more than 1 correct answer. I would not worry about some example as much as understanding of what you have in your code and how we can all help you make it work. To start, you can write an alert(“got here”); and comment all code you have in ready…to see if it even goes there.
I am a developer like many likely here so we would know…do utilize this knowledge
$("#quote").html(json[0].content);
from Polakosz
Tested:
Excellent work, yet did you explain the # selector (aka id selector) and how he can still use ready function like he had in his original code, plus I think he forgot a semicolon in his code…which he shared
A little bit modified because now you can see what is going on in the background.
Take a look guys:
document.getElementById(‘quote’).innerHTML = “Hello World”;
$(document).ready(function() {
$("#getQuote").on(“click”, function() {
$.getJSON(“https://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1”, function(json) {
$(".quote").html(JSON.stringify(json));
});
});
}) (no semicolon and there for first reason why it would never work.)
Also, you have
document.getElementById(‘quote’).innerHTML = “Hello World”; you have no id=“quote” you have a class.
You need to use Document.getElementsByClassName(‘quote’).innerHTML=“Hello World”;
Let me fix your code and show you what you had and what I fixed. 
Here is your original:
< body >
< p class = “quote” >
The message will go here
< /p >
< div id=“getQuote” >Click Here< /div >
< /body >
< script src=“https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js” >
< /script >
And here is my correction:
< body >
< p id = “quote” > <----class changed to id
The message will go here
< /p >
< div id=“getQuote” >Click Here< /div >
< /body >
< script src=“https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js” >
< /script >
Here is your original
document.getElementById(‘quote’).innerHTML = “Hello World”;
$(document).ready(function() {
$("#getQuote").on(“click”, function() {
$.getJSON(“https://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1”, function(json) {
$(".quote").html(JSON.stringify(json)); (JSON(not correct) instead of json(correct). Over here JSON changed to json because you pass in json as a paramenter and not JSON. Also .quote is not right because you should have #quote since element p has id = “quote” you access it with a # not a .
lastly do not use stringify of json because you need to extract its contents which IS a string. (I hope this helps you)
});
});
}) (you were missing a semicolon)
Here is my correction with PolakoSz input:
NOTICE HOW here you access quote as Id, therefore in html I set it as id = “quote"
document.getElementById(‘quote’).innerHTML = “Hello World”;
$(document).ready(function() {
$(”#getQuote").on(“click”, function() {
$.getJSON(“https://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1”, function(json) {
$("#quote").html(json[0].content);
});
});
});
Hope this helps clear things up!
you paste the corrections without spaces and the <— class changed to id comment (keep only code) and it will work, I just tested it. 
Keep up coding you are doing great!
As @Ofek86 recommend I made a few changes in my code to describe what happens.
A few minutes later I didn’t get any quotes becase CodePen is secure (use https://) but the webpage you want to call (get jSON) is not secure (http://) so the browser is block this request and you won’t get any response, so your
Hello World
Hello World text won’t change. 
You must have not div as closing tag but p since your opening tag is p. I tested it on his code pen and it did work one time, that is correct and not afterwards possibly because it does lock up…yet code works again I only corrected the mistakes that were made…this is deeper issue.
Also…I have not use ready function much yet is it not called when document is ready and therefore one time? Instead of every time? Same with onload…object is ready and then it’s usable instead you should take code out of ready function like Our friend here had it…given the privacy thing had not been an issue the quotes will be showing at all times. Please verify how often is ready called and onload not just when it’s called cAuse when is not the hard part,… ready when HTML and CSS and images are ready and onload is when object has loaded and ready for usage which does not wait for entire site I load and therefore is faster.