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 2

New Color not working, nor is it working in console.

I am unable to get the console to work when typing in "color" which means the new color button isn't working properly. When I click on the three <li> colors, they work, but the new color box has all three sliders at the bottom of the box instead of at the side.

    $(document).ready(function() {
        // 1. store the color from CSS properties to use in future when using mouse events
        var color = $(".selected").css("background-color");

        // 2a. When clicking on control list items
        $(".controls li").click(function() {
            // 2c. Deselect sibling elements
            $(this).siblings().removeClass("selected");
            //Select clicked element
            $(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
            $("#colorSelect ").toggle();
        });

        });

2 Answers

jared eiseman
jared eiseman
29,023 Points

Could you also post the html? without looking at it, my first suspicion is that nothing has the selected class for the variable to initialize. It could also be because the color variable is in the scope of the .ready's function, so you cannot access it from the console. If that's the case, you can get around that by removing the $(document).ready() stuff and just link to the .js file at the end of the body.

I just started over and used the workspace instead of my own text editor. It cleared it up. But thanks.