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
Nelson Ndlovu
11,417 PointsMy 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
3,286 PointsFirst 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
3,286 PointsIn 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!
Nelson Ndlovu
11,417 Pointshi. 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
3,286 PointsReposting 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
Nelson Ndlovu
11,417 PointsGreat explanation thanks for your time Katherine, I truly appreciate
Katherine Marino
3,286 PointsAnytime! :) If you're all set, you can mark a "best answer" so people browsing the community boards know that this has been answered.
Cheers!
Thomas Katalenas
11,033 Pointsanother great resource on javascript window api http://www.w3schools.com/js/js_window.asp