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

Posted by michaelkyllo
michaelkyllo
11,330 Points

I'm having trouble with Javascript code, can you see what is wrong? The color if #newColor is not changing sliders

//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");

color = $(this).css("background-color");

                    });

//When new color is pressed $("#revealColorSelect").click(function(){ $("#colorSelect").toggle();

});
//Show color select or hide the color select

//When color sliders change
function changeColor() {
   var r = $("#red").val();
   var g = $("#green").val();
   var b = $("#blue").val();

 $("#newColor").css("background-color", "rgb("+r+","+g+","+b+")");

}

//When add color is pressed
 $("input [type=range]").change(changeColor);
//Append the color to the controls ul
 //Select the new color

5 Answers

Daniel Gonzalez
Daniel Gonzalez
22,105 Points
Daniel Gonzalez
Daniel Gonzalez
22,105 Points

I problem might be in the code below. try removing the plus signs surrounding the "r, g and b" variables. 

 $("#newColor").css("background-color", "rgb("+r+","+g+","+b+")");
Daniel Gonzalez
Daniel Gonzalez
22,105 Points
Daniel Gonzalez
Daniel Gonzalez
22,105 Points

Im sorry you do need the + signs and the "" between each variable. Do you have the following function in your code? 

$("#revealColorSelect").click(function(){
   changeColor();
   $("#colorSelect").toggle();
});
michaelkyllo
michaelkyllo
11,330 Points
michaelkyllo
michaelkyllo
11,330 Points

Thank you for the help. The code you listed above was one problem. The main problem was I had a space between input and type in: //When add color is pressed $("input [type=range]").change(changeColor);

Changed to: //When add color is pressed $("input[type=range]").change(changeColor);

michaelkyllo
michaelkyllo
11,330 Points
michaelkyllo
michaelkyllo
11,330 Points

Thanks but that broke the code. Any other thoughts?

michaelkyllo
michaelkyllo
11,330 Points
michaelkyllo
michaelkyllo
11,330 Points

Thank you for your help again but this didn't change the "newColor" span. Do you know a code I could try in the console log to to see if:

$("#newColor").css("background-color", "rgb("+r+","+g+","+b+")");

changes the code?