WebStorm not running jQuery in Chrome popup

-1

I'm using WebStorm to code a website and running some code I found on Overflow to see if it would work as it fits my purpose.

HTML

<h2 class="quotes">first quote</h2>
<h2 class="quotes">second quote</h2>

CSS

.quotes {display: none;}

JavaScript

(function() {

    var quotes = $(".quotes");
    var quoteIndex = -1;

    function showNextQuote() {
        ++quoteIndex;
        quotes.eq(quoteIndex % quotes.length)
            .fadeIn(2000)
            .delay(2000)
            .fadeOut(2000, showNextQuote);
    }

    showNextQuote();

})();

This runs perfectly on the jsfiddle it was running on, but once I imported it to WebStorm and ran it in Chrome, it didn't work. Any tips?

issayahm1

Posted 2019-09-29T23:34:48.847

Reputation: 1

Did you include the jquery library. Can not tell with out seeing your code. Would also check dev console and see if you are getting any errors and or any files are not loading correctly. – Ed B – 2019-09-30T04:01:00.740

`<!DOCTYPE html>

<html lang="en"> <head> <link href="https://fonts.googleapis.com/css?family=Fugaz+One&display=swap" rel="stylesheet"> <meta charset="UTF-8"> <title>Purple Reign</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="pvphs.js"></script> <link rel="stylesheet" href="pvphs.css"> </head> <body> <h2 class="quotes">first quote</h2> <h2 class="quotes">second quote</h2> </body> </html>` – issayahm1 – 2019-09-30T04:52:07.733

2

Please edit your question instead of providing clarification (or even code) in comments.

– Daniel B – 2019-09-30T13:05:42.990

Answers

1

You are trying to get elements before they exists, so the quotes array size is 0. Try moving your <script> tag to the bottom, like:

<!DOCTYPE html>
<html lang="en">
<head>
    <link href="https://fonts.googleapis.com/css?family=Fugaz+One&display=swap" rel="stylesheet">
    <meta charset="UTF-8">
    <title>Purple Reign</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

    <link rel="stylesheet" href="pvphs.css">
</head>
<body><h2 class="quotes">first quote</h2>
<h2 class="quotes">second quote</h2>
<script src="pvphs.js"></script>
</body>
</html>

lena

Posted 2019-09-29T23:34:48.847

Reputation: 1 026