Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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

My background color is not changing

The background color is not changing even when i move the slider, i ddnt even manage to turn it black. I saw some people got results by changing

from

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

to

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

but that isnt working for me, please help

5 Answers

Katherine Marino
Katherine Marino
3,286 Points

First thing that jumps out to me is your assignment for b from the blue color slider in your changeColor function - you're missing the # in front of blue. It should read:

var b = $("#blue").val();

This should fix your changeColor function so that the newColor box changes color.

Secondly, your function for when the addNewColor button is pressed has an issue with the line

$newColor.css("background-color", $newColor.css("background-color")); 

Here we're assigning css to the newly created color circle that you are adding to the unordered list in the controls. The syntax for this is:

$var.css(property, value);

So what we should be doing here is grabbing the value for the background color from the #newColor span that displays the preview from the sliders, since we've already created the rgb value from the sliders for it. It looks confusing because we have very similar variable names here, but to grab that background color we need to select that preview span with $("#newColor"), and use .css("background-color") on THAT to get its background-color value. The whole function should look like this:

$("#addNewColor").click(function() {
  var $newColor = $("<li></li>");
  $newColor.css("background-color", $("#newColor").css("background-color"));
  $(".controls ul").append($newColor);
  $newColor.click();
});

Here it is with a different variable name to make it more clear what's going on.

$("#addNewColor").click(function() {
  var $addedColor = $("<li></li>");
  $addedColor.css("background-color", $("#newColor").css("background-color"));
  $(".controls ul").append($addedColor);
  $addedColor.click();
});

You can use either one without changing the rest of your code, since the variable is scoped to only exist inside this function.

Let me know if you have any questions on this!

Katherine Marino
Katherine Marino
3,286 Points

In the video he uses

$("input[type=range]").change(changeColor);

This works for me. The change method is called when the value of the selected element (the slider) changes.

The second line you posted is assigning an event listener, but you're passing "input" as the event name. The event we're looking for is the "change" event. So this syntax will work too, if you adjust it to

$("input[type=range]").on("change", changeColor);

Hope that helps!

hi. sorry i made a typo when i was asking the question

Here is my code below, but its not working

// Problem: No user interactivity // Solution: When user interacts the application responds var color = $(".selected").css("background-color");

//When clicking on control list $(".controls li").on("click", "li", function(){

//deselect siblings $(this).siblings().removeClass("selected") // select clicked element $(this).addClass("selected"); //cache current color color = $(this).css("background-color"); });

//When add color is selected

$("#revealColorSelect").click(function(){ //show colour selected or hide the color changeColor(); $("#colorSelect").toggle(); }); // uodate the 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 the color sliders change $("input[type=range]").change(changeColor);

//when add color is pressed

$("#addNewColor").click(function(){ //append the color to the cotrols var $newColor = $("<li></li>"); $(".controls ul").append(); $newColor.css("background-color", $newColor.css("background-color")); //select a new color $newColor.click();

});

//on mouse event on the canvas //drag lines

Katherine Marino
Katherine Marino
3,286 Points

Reposting your code for readability:

// Problem: No user interactivity 
// Solution: When user interacts the application responds 
var color = $(".selected").css("background-color");

//When clicking on control list 
$(".controls li").on("click", "li", function(){
//deselect siblings 
$(this).siblings().removeClass("selected") 
// select clicked element 
$(this).addClass("selected"); 
//cache current color 
color = $(this).css("background-color"); });

//When add color is selected
$("#revealColorSelect").click(function(){ 
//show colour selected or hide the color 
changeColor(); 
$("#colorSelect").toggle(); }); 

// uodate the 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 the color sliders change 
$("input[type=range]").change(changeColor);

//when add color is pressed
$("#addNewColor").click(function(){ 
//append the color to the cotrols 
var $newColor = $("<li></li>"); 
$(".controls ul").append(); 
$newColor.css("background-color", $newColor.css("background-color")); 
//select a new color 
$newColor.click();

});

//on mouse event on the canvas 
//drag lines

Great explanation thanks for your time Katherine, I truly appreciate

Katherine Marino
Katherine Marino
3,286 Points

Anytime! :) If you're all set, you can mark a "best answer" so people browsing the community boards know that this has been answered.

Cheers!

another great resource on javascript window api http://www.w3schools.com/js/js_window.asp