ReferenceError: $ is not defined

Question

Working in VSC with Javascript. I added <script type = "text/jquery" src="https://code.jquery.com/jquery-3.4.1.min.js"></script> in head. Then wrote .js code but nothing is working, I continue to receive the error.

HTML snippet: <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Children's Rainbow Project</title> <meta name="viewport" content="width=device-width, initial-scale=1.0">

</head>

JS Code: let quotes = [("Children are likely to live up to what you believe of them: Lady Bird Johnson"), ("Children see magic because they look for it: Christopher Moore"), ("Children must be taught how to think not what to think: Margaret Mead"), ("A person is a person, no matter how small: Dr. Suess"), ("There can be no keener revelation of a societys soul than the way in which it treats its children: Nelson Mandela"), ("We worry about what a child will become tomorrow, yet we forge that he is someone today: Stacia Tauscher")]

$(window).load(function() {
    // document is loaded and DOM is ready
    alert("document is ready");
});

    let InfiniteRotator =
{
    init: function()
    {
        var initialFadeIn = 1000;  //beginning to fade in

        var itemInterval = 5000;  //time between items

        var fadeTime = 2500;   //cross fade in and out

        var numberOfItems = $('quotes').length;  //count the items

        var currentItem=[0][0];  //sets where to begin

        $('quotes').eq(currentItem).fadeIn(initalFadeIn);  //show first item

        var infiniteLoop = setInterval(function(){     //loop through the items
            $('quotes').eq(currentItem).fadeOut(fadeTime);

            if(currentItem == numberOfItems -1){
                currentItem = 0;
            }else{
                currentItem++;
            }
            $('quotes').eq(currentItem).fadeIn(fadeTime);

        }, itemInterval);
    }
};

InfiniteRotator.init();

Answer 1 · 2019-06-05T04:52:34Z

June 5, 2019 4:52am

The "$" symbol is typically an abbreviation for "jQuery", so that makes it seem like jQuery isn't getting loaded.

Looking at the "script" tag, I notice type="text/jquery", but that isn't a script type. That's the name of the library, but it's written in javascript.

Answer 2 · 2019-06-05T17:05:44Z

June 5, 2019 5:05pm

I was thinking the same thing....jquery was not loading. I checked the source and it appears to be working. I checked MDN and it referenced: text/javascriptSection Per the HTML specification, JavaScript files should always be served using the MIME type text/javascript. No other values are considered valid, and using any of those may result in scripts that do not load or run.

Am I overthinking or just totally out to sea?

```javascript <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Children's Rainbow Project</title> <meta name="viewport" content="width=device-width, initial-scale=1.0">

</head>```

Welcome to the Treehouse Community

Looking to learn something new?

Nina Maxberry

Nina Maxberry

ReferenceError: $ is not defined

2 Answers

Steven Parker

Steven Parker

Nina Maxberry

Nina Maxberry