Question

Why does it work with “red”

var inputButtonColor = $('input#button-color');

inputButtonColor.change(function() {
  var inputButtonColorValue = inputButtonColor.val();
  alert(inputButtonColorValue);
  $('input.write-review').css({"background-color": "red" });
});

​http://jsfiddle.net/f4ngg/2/

And this not with “inputButtonColor.val()”

var inputButtonColor = $('input#button-color');

inputButtonColor.change(function() {
  var inputButtonColorValue = inputButtonColor.val();
  alert(inputButtonColorValue);
  $('input.write-review').css({"background-color": inputButtonColorValue });
});

http://jsfiddle.net/f4ngg/1/

Answer 1

You are taking color code as an input from text box, and if you want to change it to color, You have to add # before color code.

So the code will be :

var inputButtonColor = $('input#button-color');

inputButtonColor.change(function() {
  var inputButtonColorValue = inputButtonColor.val();
  alert(inputButtonColorValue);
  $('input.write-review').css({"background-color": "#" + inputButtonColor.val() });
});

DEMO