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

Sander de Wijs
PLUS
Sander de Wijs
Courses Plus Student 22,267 Points
Posted by Sander de Wijs
Sander de Wijs
Courses Plus Student 22,267 Points

Color not appending to <li> css

When I run this code on my page, the new background color is not added to the new <li></li> item. I checked the code several times and can't see the problem.

var color = $(".selected").css("background-color");

$(".controls").on("click", "li", function(){

  $(this).siblings().removeClass("selected");

  $(this).addClass("selected");

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

$("#revealColorSelect").click(function(){
  changeColor();
  $("#colorSelect").toggle();
});

function changeColor() {
  var r = $("#red").val();
  var g = $("#green").val();
  var b = $("#blue").val();

  $("#newColor").css("background-color", "rgb(" + r + "," + g + "," + b + ")");
}
  $("input[type=range]").change(changeColor);                  

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

4 Answers

Justin Hill
Justin Hill
16,642 Points
Justin Hill
Justin Hill
16,642 Points

It looks to me like you missed a "#" on your 4th to last line. You're trying to grab the background-color property of the element with id #newColor right?

Ben Attenborough
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Ben Attenborough
Front End Web Development Techdegree Graduate 32,769 Points
Ben Attenborough
.a{fill-rule:evenodd;}techdegree seal-36
Ben Attenborough
Front End Web Development Techdegree Graduate 32,769 Points

I had a similar problem. Here is my code. The new color is not appearing when I press Add Color

//When add color is pressed
$("#addNewColor").click(function() {
  console.log("Add new color clicked");
  //Append the color to controls ul
  var $newColor = $("<liv></li>"); 
  $newColor.css("background-color", $("#newColor").css("background-color"));
  $(".controls ul").append($newColor);
  //Select the new color
  $newColor.click();
});
Sander de Wijs
PLUS
Sander de Wijs
Courses Plus Student 22,267 Points
Sander de Wijs
Sander de Wijs
Courses Plus Student 22,267 Points

facepalm Thanks, I completely overlooked that! Thanks Justin!