uncaught reference error $ is not defined.....help me please

Question

I've been trying to write an app and I keep getting "Uncaught ReferenceError: $ is not defined". It's driving me mad, been through my code several times and cannot work out what's wrong. Can anyone see the problem? I'm very new to this so would appreciate all the help I can get! Cheers....

HTML

        <!DOCTYPE html>
        <html>
            <head>
                <title> SNAP THAT SWEET DINNER </title>
                    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

                    <link rel="stylesheet" type="text/css" href="style.css">

            </head>

            <body>
                <section>
                    <canvas id="1">Canvas not supported</canvas>
                    <h1> Snap that free dinner! </h1>

                        <p>Player Paul</p>
                        <p>Player Ant</p>

                    <canvas id="2">Canvas not supported</canvas>    



                </section>

                    <script src="//http:code.jquery.com/jquery-1.11.0.min.js"></script>

                    <script src="script.js"></script>

            </body> 




        </html

CSS:

 body {
        text-align: center;
        font-family: Helvetica;
        background: lightGrey;
    }

    canvas{
        width: 100%;
        height: 42%;
        background-color: yellow;
        border-radius: 15px;
        background-image: url("https://c1.staticflickr.com/1/55/139721356_a7748d8928_z.jpg?zz=1/image1.jpg");
        background-size: cover;
        background-position: centre;
    }


    html, body, section {
    height: 100%; 
    }

    h1{
        background: yellow;
        padding: 2%;
        margin: 2%;
        border: 2px solid black;
        border-radius: 40px;
    }

    p{
        width:40%;
        float: left;
        padding: 2%;
        margin: 2%;
        border: 2px solid black;
        border-radius: 40px;
        display: none;
    }

JS

// Define images to use
var imgArray = ["https://c1.staticflickr.com/1/206/447644669_27b7db7bf6_z.jpg?zz=1/image1.jpg", "https://c1.staticflickr.com/1/55/139721356_a7748d8928_z.jpg?zz=1/image2.jpg", "https://c2.staticflickr.com/4/3947/15679809871_aa34830ebc_z.jpg,image3.jpg", "https://c2.staticflickr.com/6/5166/5279373536_522839f447_b.jpg/image4.jpg", "http://christmasstockimages.com/free/food-dining/slides/raw_uncooked_turkey.jpg/image5.jpg"];
//create number variable
var num1;
var num2;
//randomly change number
num1 = Math.floor( Math.random() * imgArray.length );
num2 = Math.floor( Math.random() * imgArray.length );
//test random numbers
console.log("first random number is" +num1);
console.log("second random number is" +num2);
//create image variables
var img1 = imgArray[ num1 ];
var img2 = imgArray[ num2 ];
//create css value for background image
var url1 = "url("+ img1 +")";
var url2 = "url("+ img2 +")";

//use jquery to change background image
$("canvas#1").css("background-image", url1);
$("canvas#2").css("background-image", url2);

score 4 · Answer 1 · answered Feb 24 '15 at 22:45

4

It should be <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>

answered Feb 24 '15 at 22:45

Alex Lau

1,687
10
17

Nope... still coming up with the same error :( – Anthony Whitehead Feb 24 '15 at 23:40
Are you sure you have made right changes and you have paste the full source code? I can reproduce your error and also fix the error as mentioned. See the [jsfiddle](http://jsfiddle.net/e1mym9qa/) – Alex Lau Feb 25 '15 at 00:03
No still doesn't work. Can get it to work within jsfiddle but when it comes to running original it still comes up with the same message.... – Anthony Whitehead Feb 25 '15 at 08:53
in the java script console its highlighting $("canvas#1").css("background-image", url1); as error..... any ideas? Thanks for your help, I appreciate it a lot. – Anthony Whitehead Feb 25 '15 at 08:59
Are you using loading as a local file (`file://`)? If so, the double slash won't work, you may 1) download jQuery and put it in your project folder, or 2) put your page on a web server, or 3) or add `http:` in front of the script. – Alex Lau Feb 25 '15 at 12:30

uncaught reference error $ is not defined.....help me please

1 Answers1