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 Christopher Stuart
.a{fill-rule:evenodd;}techdegree seal-36
Christopher Stuart
Full Stack JavaScript Techdegree Graduate 27,771 Points

Sliders Aren't Changing Color

Hi I seem to be having a similar issue to others---and can't seem to identify any issues, nor are there any errors in developer tools. I don't even see the black color next to the sliders--and when changed, there is no color that appears. Any ideas?

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

});


//When new color is pressed
$("#revealColorSelect").click(function(){
  //Show color select or hide the 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]").on("change",changeColor);
  //Update new color span

1 Answer

Steven Parker
Steven Parker
243,656 Points
Steven Parker
Steven Parker
243,656 Points

When selecting an element by ID, you must prefix a "#" symbol to the id name:

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

And this is unrelated to your issue, but after you play with it a bit as-is, try changing the trigger event for the color change to "input". I found that made it much more fun:

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