Drawing Perform: Part 2

Question

Hello,

I face a strange problem here. I tried to fix it but i'm not sure if there is a mistake in my code or some change happened in jQuery since the video.

This is my code

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

//When clicking on control list items
$(".controls li").click(function(){
  //Deselect sibling elements
  $(this).siblings().removeClass("selected");
  //Select clicked element
  $(this).addClass("selected");
  //Cache color here
  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 the 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
  //Append the color to the controls up
  //Select the new color

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

At the end of the video when he tests the color change by dragging the range inputs his color changes simultaneously but mine changes only when I unclick it.

Answer 1 · 2014-07-06T15:37:57Z

July 6, 2014 3:37pm

Hi Kristian,

It's more like there's been a change in chrome since the video was recorded. You're experiencing the correct behavior for the "change" event.

The "change" event is only supposed to go off one time either when you've committed a value if that makes sense, or when the input loses focus.

Instead you need the "input" event. This event goes off whenever an input value is changed. So when you're dragging the slider around you're repeatedly changing the input value and so the "input" event will go off repeatedly in response to that. This allows a real time update of the color while you're dragging.

At the time of recording, Chrome had an incorrect implementation of the "change" event. It was acting the same way that the "input" event is supposed to act.

I don't think there is a shortcut method for the "input" event like there is for "change" so you have to use the .on method and pass in the "input" event as the first argument.

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

Welcome to the Treehouse Community

Looking to learn something new?

Kristian Terziev

Kristian Terziev

Drawing Perform: Part 2

1 Answer

Jason Anello

Jason Anello

Seth McCombs

Seth McCombs