Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript

ReferenceError: $ is not defined

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

<script type = "text/jquery" src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <!----<script type ="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js?ver=3.0.1"></script>--> <script type="text/javascript" src="js/infinite-rotator.js"></script>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css"> <link rel="stylesheet" href="css/styles.css"> <link rel="stylesheet" href="css/programs.css"> <link rel="stylesheet" href="css/forms.css"> <link rel="stylesheet" href="css/contact.css">

</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();

2 Answers

Steven Parker
Steven Parker
216,057 Points

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.

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

<script type=text/javascript src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script type =text/javascript src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js?ver=3.0.1"></script> <script type = text/javascript src="js/infinite-rotator.js"></script>

<!----<script type="text/javascript" src="javascript.js"></script>--->

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css"> <link rel="stylesheet" href="css/styles.css"> <link rel="stylesheet" href="css/programs.css"> <link rel="stylesheet" href="css/forms.css"> <link rel="stylesheet" href="css/contact.css">

</head>```