Moving webpage from codepen to local editor - trouble getting jQuery to work

1

So I’m taking the training wheels off and will be working in an editor (Brackets), instead of codepen. I started a draft of a project in codepen but I’m having some trouble moving it over and making sure the javascript still works.

My html head section; my css seems to link fine but no dice with the js:

    <head>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
        <link rel="stylesheet" type="text/css" href="style.css">
        <link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"
      rel="stylesheet">
        <script src="javascript.js"></script>
    </head>

My JS file:

$(document).ready(function() {

  var backgrounds = [
   // 'url("https://i.imgsafe.org/fcad878b58.jpg")',
    'url("https://i.imgsafe.org/fd8d13a4dd.jpg")',
    'url("https://i.imgsafe.org/fd92240bdb.jpg")',
    'url("https://i.imgsafe.org/8c6fd20f8b.jpg")',
  ];
  var i = 0;
  setInterval(function() {

    $("#pageContainer").css("background-image", backgrounds[i]);
    i++
    if (i > backgrounds.length) {
      i = 0;
    }
  }, 4000);

});

Am I doing something wrong in the way I’m loading the js file or adding the jQuery library? My editor is also giving me a number of errors about my js code which I wasn’t getting with codepen:

1	'$' was used before it was defined.	$(document).ready(function() {
1	Expected exactly one space between 'function' and '('.	$(document).ready(function() {
3	Missing 'use strict' statement.	var backgrounds = [
3	Expected 'var' at column 5, not column 3.	var backgrounds = [
5	Expected 'url("https://i.imgsafe.org/fd8d13a4dd.jpg")' at column 13, not column 5.	'url("https://i.imgsafe.org/fd8d13a4dd.jpg")',
6	Expected 'url("https://i.imgsafe.org/fd92240bdb.jpg")' at column 13, not column 5.	'url("https://i.imgsafe.org/fd92240bdb.jpg")',
7	Expected 'url("https://i.imgsafe.org/8c6fd20f8b.jpg")' at column 13, not column 5.	'url("https://i.imgsafe.org/8c6fd20f8b.jpg")',
7	Unexpected ','.	'url("https://i.imgsafe.org/8c6fd20f8b.jpg")',
18	Expected ']' at column 9, not column 3.	];
19	Expected 'var' at column 5, not column 3.	var i = 0;
19	Combine this with the previous 'var' statement.	var i = 0;
20	Expected 'setInterval' at column 5, not column 3.	setInterval(function() {
20	Expected exactly one space between 'function' and '('.	setInterval(function() {
22	Expected '$' at column 9, not column 5.	$("#pageContainer").css("background-image", backgrounds[i]);
23	Expected 'i' at column 9, not column 5.	i++
23	Unexpected '++'.	i++
23	Expected ';' and instead saw 'if'.	i++
24	Expected 'if' at column 9, not column 5.	if (i > backgrounds.length) {
25	Expected 'i' at column 13, not column 7.	i = 0;
26	Expected '}' at column 9, not column 5.	}
27	Expected '}' at column 5, not column 3.	}, 4000);

Not really sure where these came from. Any help would be greatly appreciated.

2

Your <script> tags linking to your js ( both your js and jquery) should be just before the </body> tag.

Also you should have bootstrap.min.css before styles.css ( otherwise your browser will look at your styles, and then forget all about it because it’s followed by Bootstrap!).

As for the errors - I used to get them all the time with Brackets and suddenly I was getting errors with no files at all… I don’t know if there’s a way to fix it (I 've started using Visual Studio Code and love it so far).

[edit] that being said a lot of those errors are tips to write your code more clearly (keep space between name and brackets, etc).

1 Like
3

Thank you kindly for the quick response! Swapping around the bootstrap and external stylesheet definitely fixed another issue with my styling which I forgot to ask about, thanks!

I’ve moved my script tags to the bottom of the code, just above </body> however I’m still not seeing the background change as expected with the codepen version.

1 Like
4

I’m not sure at all - and I should be going to bed now - but maybe you could try console.log your variables in the interval to see if that works.

Also change your interval to 1000 (4 secs is a long time to wait when you’re debugging), and maybe change your pictures to colors instead (faster) - just to work with something faster and clear until you fix your function.

I don’t know but I find your for loop a bit funny - but that’s me.

Also it might help but in MDN Javascript they show their example of setInterval() in a variable ( so

etc```
5

Scratch what I’ve said - you’re right, I’ve pasted everything in COdepen and it works…
Damn.

[EDIT] And I’ve tried in my Editor and it works fine too ! Might be something with your script tags?

Here are mine:

  src="https://code.jquery.com/jquery-3.1.1.min.js"
  integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
  crossorigin="anonymous"></script>
    <script src="app.js"></script>```

Also have you given your div a height and a width?
6

To be fair though you are right, the loop is a bit weird. Ultimately I was planning on changing it as I want the images to make a nicer transition. It’s more that I just wanted to make sure my js file is working before I start changing the project!

7

it works it works check my previous message, I’ve edited it…

1 Like
8

Amazing, thanks so much! It looks like the jquery cdn script I was using wasn’t working for whatever reason. Yours worked a treat though!

9

Cool ! Glad it worked - and so your code is perfect !

10

you rock, thanks for not going to bed and helping me out there!

1 Like
11

what errors is it giving you ?