While the teacher was looking for another method to bind new color elements. I've done it with the last function.

Question

As you can see below. I've just added another function over anonymous one in order to use easily by calling its name below. I put this "#" symbol where you should look at. I'm just wondering what do you think?)) Coz my code works completely fine.

//Problem: No user interaction causes no change to application.
//Solution: When user interacts causes changes appropriately.
var color = $(".selected").css("background-color");//When the page loads first time we declare selected color.

// ################When clicking on control list items.
function controlColorItems() {

  $(".controls li").click(function(){
    //Deselect sibling elements.
    $(this).siblings().removeClass("selected");
    // Select cliked element.
    $(this).addClass("selected");
    //cache current color here.
  color = $(this).css("background-color");// Caching the color helps to use it later for example for mouse events like drawing lines.
  });

}
controlColorItems();

//When "New color" is pressed.
$("#revealColorSelect").click(function() {

  //Show a 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]").change(changeColor);

//When "Add color" is pressed.
$("#addNewColor").click(function(){
  //Append the color to controls ul.
  var $newColor = $("<li></li>");
  $newColor.css("background-color", $("#newColor").css("background-color"));//We want background color of this element to be the input from last function changeColor.
  $(".controls ul").append($newColor);
  //Select the new color.
    controlColorItems();//###############Look for the function up above.


});



//On mouse events on canvas.
  //Draw lines

Answer 1 · 2017-10-22T16:52:35Z

October 22, 2017 4:52pm

It doesn't make any sense to add an event listener to the function when you can use event delegation or bubbling. This is why he used on() instead of click(). In your example, controlColorItems() is called every time you click add color. In other words, every new item has separate click event handler. By using on() you can simply apply handler to the parent and dynamically listen if children were clicked.

I recommend reading about event delegation (bubbling).

Welcome to the Treehouse Community

Looking to learn something new?

Stas Bunchukov

Stas Bunchukov

While the teacher was looking for another method to bind new color elements. I've done it with the last function.

1 Answer

Tobiasz Gala

Tobiasz Gala