HTML5 color pick change span color

Question

I'm making a form where you can preview the result. I've made this:

HTML:

<input type="color" id="color" />
<span id="colorchange">Foo</span>

JS:

 $(document).ready(function() {
    $("#color").click(function() {
         var color= $(this).attr('val'); // Not sure about this
         $("#colorchange").css("color","+color+");
    });
 });

Which didn't work. Any ideas?

Thanks!

Edit: jsfiddle here: http://jsfiddle.net/xgm34/

New edit

Answer 1

Use the change event in jQuery:

$("#color").on('change', function() {
    $("#colorchange").css({"color":$(this).val()});
});

http://jsfiddle.net/j27Bu/

Answer 2

use this code -

$(document).ready(function() {
    $("#color").change(function() {
        var color = $(this).val();
        $("#colorchange").css("color", color);
    });
});

see this fiddle - http://jsfiddle.net/xgm34/10/

Answer 3

using on keyup it will change the color while typing.

 $("#color").on('keyup',function() {
        $("#colorchange").css({"color":$(this).val()});

    });

http://jsfiddle.net/tamilmani/j27Bu/1/

Answer 4

You forgot to close some braces and parentheses

$(document).ready(function() {
$("#color").click(function() {
        $("#colorchange").css("color","+color+");
  });
});

By the way:

• The color type in input doesn't exist
• dont forget to close yout input element />