Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Jason Portilla
15,345 Pointsdoes anyone have trouble with their js file not working after linking it correctly to html? I don't know what to do.
I tried everything to make my js file work but it's not working. Im using brackets editor.
Jason Portilla
15,345 Points<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>Gallery</title>
<link rel="stylesheet" href="stylesheets/gallery.css">
</head>
<body>
<div id="top-portion">
<h1 class="main-title">Image Gallery</h1>
</div>
<div class="photos">
<ul>
<li><a href="images/boat.png"><img src="images/boat.png" width="100" alt="Boat"></a></li>
<li><a href="images/chuck.png"><img src="images/chuck.png" width="100" alt="chuck"></a></li>
<li><a href="images/copy_mcrepeatsalot.png"><img src="images/copy_mcrepeatsalot.png" width="100" alt="mcrepeat"></a></li>
<li><a href="images/education.png"><img src="images/education.png" width="100" alt="education"></a></li>
<li><a href="images/illustrator_foundations.png"><img src="images/illustrator_foundations.png" width="100" alt="illustrator"></a></li>
<li><a href="images/library.png"><img src="images/library.png" width="100" alt="library"></a></li>
<li><a href="images/refferal_machine.png"><img src="images/refferal_machine.png" width="100" alt="refferal"></a></li>
<li><a href="images/sebastian.png"><img src="images/sebastian.png" width="100" alt="sebastian"></a></li>
<li><a href="images/skill-polish.png"><img src="images/skill-polish.png" width="100" alt="skill"></a></li>
<li><a href="images/space-juice.png"><img src="images/space-juice.png" width="100" alt="space"></a></li>
<li><a href="images/treehouse_shop.jpg"><img src="images/treehouse_shop.jpg" width="100" alt="treehouse"></a></li>
</ul>
</div>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>
CSS
body {
margin: 0;
padding: 0;
}
#top-portion {
margin: 0;
height: 40px;
background-color: blue;
}
.main-title {
text-align: center;
}
.photos ul {
list-style: none;
margin: 0 auto;
padding: 0;
display: block;
width: auto;
text-align: center;
}
.photos li {
display: inline-block;
padding: 8px;
background: white;
margin: 10px;
}
.photos img {
display: block;
}
.photos a {
text-decoration: none;
}
#overlay {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: rgba(0,0,0,0.7);
display: none;
}
Js
var $overlay = $('<div id='overlay'></div>');
$("body").append($overlay);
alert("I'm working");
5 Answers
LaVaughn Haynes
12,397 PointsI edited your comment to display your code properly. Also, I could be mistaken but I believe that unless you are running your code on a server you need to include the http: in your script tag.
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
Basically, if you are running this on your local PC you might do this
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
LaVaughn Haynes
12,397 PointsHere is the info on the protocol-relative URI. Add the http: or it will add file:// if you are running it locally. http://www.paulirish.com/2010/the-protocol-relative-url/
Also you have single quotes nested in single quotes in the first line of your JS file. Change that:
//var $overlay = $('<div id='overlay'></div>');
var $overlay = $('<div id="overlay"></div>');
Colton Ehrman
Courses Plus Student 5,859 PointsYou don't have a link to your js file in the html
Links are done like this
<script src="[javascript source file here]"></script>
sizwengubane
15,244 PointsYo bro If you are using pure javascript you have to link your .js file to ur html by using a script tag. place the script tag below just before the closing body tag in your html document. This will let all the HTML on your document to load first before executing any javascript. <blockquotes>
<script src="location of your javascript file"></script>
</blockquotes>
BUT if you are using jQuery with a .js file, you must do the following
- link to the jQuery library by either downloading the jQuery file or by using a content delivery network (CDN)
- link to the .js file (place both the script elements just before the closing body tag)
<blockquotes>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script> (the jQuery library file)
<script src="location of your javascript file"></script> (your own javascript file)
</blockquotes> if i managed to help, mark my answer the best
Jason Portilla
15,345 Points<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>Gallery</title>
<link rel="stylesheet" href="stylesheets/gallery.css">
</head>
<body>
<div id="top-portion">
<h1 class="main-title">Image Gallery</h1>
</div>
<div class="photos">
<ul>
<li><a href="images/boat.png"><img src="images/boat.png" width="100" alt="Boat"></a></li>
<li><a href="images/chuck.png"><img src="images/chuck.png" width="100" alt="chuck"></a></li>
<li><a href="images/copy_mcrepeatsalot.png"><img src="images/copy_mcrepeatsalot.png" width="100" alt="mcrepeat"></a></li>
<li><a href="images/education.png"><img src="images/education.png" width="100" alt="education"></a></li>
<li><a href="images/illustrator_foundations.png"><img src="images/illustrator_foundations.png" width="100" alt="illustrator"></a></li>
<li><a href="images/library.png"><img src="images/library.png" width="100" alt="library"></a></li>
<li><a href="images/refferal_machine.png"><img src="images/refferal_machine.png" width="100" alt="refferal"></a></li>
<li><a href="images/sebastian.png"><img src="images/sebastian.png" width="100" alt="sebastian"></a></li>
<li><a href="images/skill-polish.png"><img src="images/skill-polish.png" width="100" alt="skill"></a></li>
<li><a href="images/space-juice.png"><img src="images/space-juice.png" width="100" alt="space"></a></li>
<li><a href="images/treehouse_shop.jpg"><img src="images/treehouse_shop.jpg" width="100" alt="treehouse"></a></li>
</ul>
</div>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>
it's still not working...I also cleared my history and its not showing black.
var $overlay = $('<div id="overlay"></div>');
$("body").append($overlay);
I even changed the quotation marks....
I'm getting this error as well
'$' was used before it was defined. var $overlay = $('<div id="overlay"></div>');
LaVaughn Haynes
12,397 PointsYour overlay is not showing because you have display: none; in your stylesheet for the #overlay styles
Do you have any other javaScript? If your only script is the app.js file and it looks like the code below then you should not get that error
var $overlay = $("<div id='overlay'></div>");
$("body").append($overlay);
alert("I'm working");
Jason Portilla
15,345 Pointsomg thanks...it was the display: none that was messing it up....I don't know why i did that...I feel so dumb. thanks everyone.
LaVaughn Haynes
12,397 PointsLaVaughn Haynes
12,397 PointsAre you using jQuery or just javaScript? can you paste your html?