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

Posted by Thomas Katalenas
Thomas Katalenas
11,033 Points

color circle doesnt work

the circle pops up but the background color is dark gray and doesn change looks lik an empty li under the controls class in the console... any help ?

var color = $(".selected").css("background-color");        //my code wrong...wa ([.red, .blue, .yellow]);

$(".controls li").click(function(){
  $(this).siblings().removeClass("selected"); //siblings traverses to the left of a line. we dont put the dot for selected because removeClass already does that.
  $(this).addClass("selected");

  // mycode wrong $(this).next
  color = $(this).css("background-color"); // catches the color when we draw lines later.
});

$("#revealColorSelect").click(function(){;   // see button ids get #, div classes get .  ??? 
    changeColor();   // if this is not here it wont work
    $("#colorSelect").toggle();     // toggle effect display or hides all inside the div including sliders. notice div id under button also has #


});

function changeColor(){
  //window.changeColor
  var r = $("#red").val();
  var g = $("#green").val();
  var b = $("#blue").val();  
  $("#newColor").css("background-color", "rgb(" + r + ", " + g + ", " + b + ")");  
};  // not sure why the "rgb..' string is there. because .css can get or set values 
//oh i see creates <span id="newColor" style="background-color: rgb(255, 208, 255);">       

$("input[type=range]").change(changeColor);  //css selector that only selects type of range, input is in index.html and has type="range", with select box change will select method


$("#addNewColor").click(function(){
  var $newColor = $("<li></li>");
  $newColor.css("background-color", $("newColor").css("background-color"));
  // mine wrong doesnt work...   $(".canvas").append("#newColor");

  $(".controls ul").append($newColor);

  $newColor.click();
});

// made it to 9:17  times up   li color circle add doesn't work like in video

<!DOCTYPE html>
<html>
<head>
    <title>Simple Drawing Application</title>
    <link rel="stylesheet" href="css/style.css" type="text/css" media="screen" title="no title" charset="utf-8">
</head>
<body>
    <canvas width="600" height="400"></canvas>
    <div class="controls">
        <ul>
            <li class="red selected"></li>
            <li class="blue"></li>
            <li class="yellow"></li>
        </ul>
        <button id="revealColorSelect">New Color</button>
        <div id="colorSelect">
            <span id="newColor"></span>
            <div class="sliders">
                <p>
                    <label for="red">Red</label>
                    <input id="red" name="red" type="range" min=0 max=255 value=0>
                </p>
                <p>
                    <label for="green">Green</label>
                    <input id="green" name="green" type="range" min=0 max=255 value=0>
                </p>
                <p>
                    <label for="blue">Blue</label>
                    <input id="blue" name="blue" type="range" min=0 max=255 value=0>
                </p>
            </div>
            <div>
            <button id="addNewColor">Add Color</button>
            </div>
        </div>
    </div>
    <script src="http://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/app.js" type="text/javascript" charset="utf-8"></script>    
</body>
</html>

4 Answers

Clayton Perszyk
MOD
Clayton Perszyk
Treehouse Moderator 48,850 Points
Clayton Perszyk
Clayton Perszyk
Treehouse Moderator 48,850 Points

Hey Thomas,

You need to change this line:

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

to this:

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

The reason for this is that when you add a new list item, the click handler will not be applied to it; it only affects the initial list items. To implement the desired functionality, you have to use event delegation, which is what the second snippet is doing.

Here is a great and brief overview of event delegation : https://learn.jquery.com/events/event-delegation/

Ibne Zabed
Ibne Zabed
12,320 Points
Ibne Zabed
Ibne Zabed
12,320 Points

You forgot to use the on jquery method. On method

The on method binds event handlers (such as click) for both current and later events. You needed to use the on method because the add new color button appended a new color to the list item.

Thomas Katalenas
Thomas Katalenas
11,033 Points
Thomas Katalenas
Thomas Katalenas
11,033 Points

https://w.trhou.se/pn5ghpiy6w there's a snapshot of my workspace, the color circle still doesn't work.

Gautam Ajay
Gautam Ajay
3,453 Points
Gautam Ajay
Gautam Ajay
3,453 Points

$newColor.css("background-color", $("newColor").css("background-color")); I had the same problem. The "newColor" needs to have an # before it.