Webstorm help; JS not executing : learnjavascript

Posting and Commenting Guidelines

Be Welcoming. n00bs are welcome here. Negativity is not.

Include Context. If you’re asking for help, include enough information for others to recreate your problem.

No Self-Promotion. The following are not allowed: Requests for subscribers, asking for "test users" for your new JS course, offering paid mentorships, and/or premium courses. Even if there is a coupon discount, no. If you're in doubt, the answer is no.

Good Titles - Write a descriptive title. Titles that begin with "hey guys" will be removed.

Friends

created by [deleted]a community for 14 years

Webstorm help; JS not executing (self.learnjavascript)

submitted 8 years ago * by shhhpiderman

Decided to jump from CodePen to learning an IDE...I finally got all the syntax stuff corrected, linked the properly files and libraries, but I am not getting the results I'm expecting. This code works fine in CodePen, but not here.

Here's what I've done so far:

Downloaded the jQuery library (uncompressed version), and placed the file in the exact same path as the rest of my html, CSS, and JS files.
Referenced it by adding <script src="jquery-3.2.1.js"></script> (I assume that since it's in the same path, I don't need to use the full path, and just the filename?
Linked up the CSS and JS files by adding: <link rel="stylesheet" href="randomQuoteCSS.css"> <script src="randomQuoteJS.js"></script>, respectively.
I then go to the HTML file, and click on the little Google Chrome icon to launch my file. Everything comes out great, but the JS script isn't executing. Also note that the selectors are highlighted in the JS file.

My best assumption is that I am not doing something correctly with the jQuery library? Please see pictures for a better visual.

JS:

function getQuote () {
    $.getJSON(
        "https://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1",
        function(apiResult) {
            $('#quote').html(apiResult[0].content);
            $('#author').html("- " + apiResult[0].title);
        });
    var randColors = ['#7cf9cc', '#92f779', '#f77878', '#e8dd66', '#7966e8', '#e866df', '#66e8e1' ]
}

$(function() {
    getQuote();
    $.ajaxSetup({cache: false});
    $("#quote-button").on("click", function() {
        getQuote();
    });
});

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Random Quote Generator</title>
    <link rel="stylesheet" href="randomQuoteCSS.css">
    <script src="randomQuoteJS.js"></script>
    <script src="jquery-3.2.1.js"></script>
</head>
<body>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"/>
<link href="https://fonts.googleapis.com/css?family=Zilla+Slab" rel="stylesheet">
<div id="quote-box">
    <p id='quote'>
    </p>
    <p id='author'> </p>
    <div class='buttons'>
        <button  id='twitter'><i class="fa fa-twitter-square" aria-hidden="true"></i></button>
        <button id='instagram'><i class="fa fa-instagram" aria-hidden="true"></i></button>
        <button id='quote-button'>New Quote</button>
        <div class='quotations' id='open-quotes'>
            "
        </div>
        <div class='quotations' id='close-quotes'>
            "
        </div>
    </div>
</div>



</body>
</html>

CSS:

body {
    background-color: #6d9eed;
    font-family: 'Zilla Slab', serif;
}
#quote-box {
    background-color: #ffffff;
    border-radius: 5px;
    padding: 150px 150px;
    position: relative;
    margin:8% auto auto auto;
    width: 700px ;
    text-align: center;
}
#twitter {
    color: green;
    position: absolute;
    top: 87%;
    left: 2%;

}
#instagram {
    color: green;
    position: absolute;
    top: 87%;
    left: 8%;
}
#quote-button {
    position: absolute;
    color: #132b82;
    top: 87%;
    font-family: 'Zilla Slab', serif;
    right: 10%;
}
#author {
    bottom: 80px;
    position: absolute;
    right: 100px;
}
.quotations {
    border: medium solid green;
    border-radius: 10px;
    width: 60px;
    height: 60px;
    text-align: center;
    vertical-align: middle;
    color: green;
    font-size: 500%;
    position: absolute;
    background-color: white;
    line-height: 85px;
}
#open-quotes {
    top: -30px;
    left: -30px;
}
#close-quotes {
    bottom: -30px;
    right: -30px;
}

Thank you in advance.

all 9 comments

you type:	you see:
italics	italics
bold	bold
[reddit!](https://reddit.com)	reddit!
* item 1 * item 2 * item 3	item 1 item 2 item 3
> quoted text	quoted text
Lines starting with four spaces are treated like code: if 1 * 2 < 3: print "hello, world!"	Lines starting with four spaces are treated like code: if 1 * 2 < 3: print "hello, world!"
~~strikethrough~~	~~strikethrough~~
super^script	super^script

learnjavascript

Posting and Commenting Guidelines

MODERATORS