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

HTML jQuery Basics (2014) Creating a Simple Drawing Application Perform: Part 2

Drawing Perform: Part 2


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
  //Select clicked element
  //Cache color here
  color = $(this).css("background-color");

//When new color is pressed 
  //Show color select or hide the color select

//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 

//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.

1 Answer

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);

Seth McCombs
Seth McCombs
16,767 Points

Thanks for that Jason!! I was wondering the same thing as Kristian! Using the .on method worked!!