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

JavaScript jQuery Basics (2014) Creating a Simple Drawing Application Perform: Part 3

Posted by Susan Rusie
Susan Rusie
10,671 Points

Why is this not working right?

I have gone over and over this code and I can't find the error that is will let me select the magenta button when I add it. Any help on this would be greatly appreciated. Here is my code:

//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").on("click", "li", function() {
  //Deselect sibling elements
  $(this).siblings().removeClass("selected"); 
   //Select clicked element
  $(this).addClass("selected");
  //cache current color
  color = $(this).css("background-color");
  }); 

 //When "New Color" is pressed
 $("#revealColorSelect").click(function(){
    //Show color select or hide color select
    changeColor();
    $("#colorSelect").toggle(); 
 });    

//update new color span
 function changeColor(){
    var r = $("#red").val();
    var g = $("#green").val();
    var b = $("#blue").val();
    $("#newColor").css("background-color", "rgb(" + r + "," + g +", " + b + ")");
 }

//When color sliders change 
$("input[type=range]").change(changeColor);

// When "Add Color" is pressed
$("#addNewColor").click(function(){
    //Append the color to the controls
    var $newColor = $("<li></li>");
    $newColor.css("background-color", $("#newColor").css("background-color"));
    $(".controls ul").append($newColor);
    //Select the new color
    $newColor.click();
});

  //On mouse events on the canvas
    //Draw lines
Susan Rusie
Susan Rusie
10,671 Points

Jennifer,

Thanks for your help. I don't know why, but it works now. All I did was re-type line 5 with the ".on" conmand and it worked fine. Go figure.

Jennifer Nordell
seal-mask
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher
Jennifer Nordell
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

Susan Rusie really really strange. Because I looked at that particular piece over and over and it has the .on in there. Glad you got it working! :thumbsup:

2 Answers

Cindy Lea
PLUS
Cindy Lea
Courses Plus Student 6,497 Points
Cindy Lea
Cindy Lea
Courses Plus Student 6,497 Points

Try this:

//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 elements $(this).siblings().removeClass("selected"); //Select clicked element $(this).addClass("selected"); //cache current color color = $(this).css("background-color"); });

//When new color is pressed //Show color select or hide the color select

//When color sliders change //update the new color span

//When add color is pressed //Append the color to the controls ul //Select the new color

//On mouse events on the canvas //Draw lines

Susan Rusie
Susan Rusie
10,671 Points

I did what you suggested and nothing is working. I even removed some extra spaces I didn't know I had and it didn't make a difference. The spaces I removed were before the "{" after function() on lines 6, 16, and 34 and after line 3 where it says ".css("background-color); in between ".css" and ("background-color);. I even refreshed the browser to remove the cache from the browser. Then, I tried closing everything out in Notepad++, closing out Notepad++, and re-opening it and re-opening the files from this video. Still no change. Any thoughts?

Jennifer Nordell
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher
Jennifer Nordell
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

Honestly? I can't find the error and I've been over it line for line. Your code (imo) looks like mine. So now I'm going to ask a silly question. Are you sure you've saved your file, refreshed the page, and as a last resort cleared the browser cache?

Susan Rusie
Susan Rusie
10,671 Points

I did do that and even closed everything out in Notepad++ and re-opened it. Still, same result. It's mind boggling why it is doing this. There has got to be a character or some other code I left out that I missed.

Susan Rusie
Susan Rusie
10,671 Points

I am doing it locally in Notepad++.

Jennifer Nordell
seal-mask
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher
Jennifer Nordell
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

Susan Rusie I'm thinking it might be because the jQuery toggle function has been deprecated, but I really don't know. You might have to do this one on workspaces.

https://api.jquery.com/toggle-event/

Susan Rusie
Susan Rusie
10,671 Points

Unfortunately, I have to do this in Notepad++. Is there any other option than toggle that might clear up this problem?

Jennifer Nordell
seal-mask
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher
Jennifer Nordell
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

Susan Rusie Here's something I found on stack overflow. You might take a look at this and see if it helps. Otherwise I'd probably contact the course instructor as I sincerely can't find the error in your code. Or maybe post this question again, and I'll keep out of it :smiley:

http://stackoverflow.com/questions/17583215/jquery-toggle-event-deprecated-what-to-use