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
Chad Erdman
Front End Web Development Techdegree Student 4,917 Points"Uncaught ReferenceError: color is not defined"
So i'm completely stumped here. As far as i can tell my code seems to be identical to Andrew's, but when i preview it in workspaces it doesn't seem to work. When i test "color" in the console i'm getting an "Uncaught ReferenceError: color is not defined" error. It seems a few other people had similar problems but a clear answer was never really given, or at least a solution that works for me. To save myself from any future confusion, I really don't want to proceed any further with this lesson until i can solve this problem or at the very least obtain a better understanding as to why this could be happening, please help!
//Problem: No user interaction causes no change to application
//Solution: When user interacts cause changes appropriately
var color = $(".selected").css("background-color");
//When clicking on control list items
$(".controls li").click(function(){
//Deselect sibling element
$(this).siblings().removeClass("selected");
//Select clicked element
$(this).addClass("selected");
//Cache current color
color = $(this).css("background-color");
});
Chad Erdman
Front End Web Development Techdegree Student 4,917 PointsI don't believe so, but i wouldn't be surprised if i'm missing something at this point. I'm not catching anything but maybe you'll have better luck. Here is my HTML,
<!DOCTYPE html>
<html>
<head>
<title>Simple Drawing Application</title>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" title="no title" charset="utf-8">
</head>
<body>
<canvas width="600" height="400"></canvas>
<div class="controls">
<ul>
<li class="red selected"></li>
<li class="blue"></li>
<li class="yellow"></li>
</ul>
<button id="revealColorSelect">New Color</button>
<div id="colorSelect">
<span id="newColor"></span>
<div class="sliders">
<p>
<label for="red">Red</label>
<input id="red" name="red" type="range" min=0 max=255 value=0>
</p>
<p>
<label for="green">Green</label>
<input id="green" name="green" type="range" min=0 max=255 value=0>
</p>
<p>
<label for="blue">Blue</label>
<input id="blue" name="blue" type="range" min=0 max=255 value=0>
</p>
</div>
<div>
<button id="addNewColor">Add Color</button>
</div>
</div>
</div>
<script src="http://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/app.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>
Umesh Ravji
42,386 PointsI've tried it out in Chrome and Brave, and it works fine in both of them.
It's like it's not picking up your js file (color is not defined error), try a console.log() statement at the top to see if that works. Maybe try creating a new workspace cause I can't see anything wrong with the code.
1 Answer
Stan Day
36,802 PointsI'd try a new workspace, everything looks fine with your code.
Chad Erdman
Front End Web Development Techdegree Student 4,917 PointsAfter creating a new workspace everything seems to work fine. I have no idea what could have caused that but I'm glad it's fixed.
Umesh Ravji
42,386 PointsUmesh Ravji
42,386 PointsHi Chad, I launched the workspace for the video, pasted your code into the app.js file, and it ran fine. Is there an error with your HTML file?