Menu
I am trying to change the color of an h1 element based on a selection using the color input type, but i cant seem to get it to work. I've tried outputting the color variable to an alert and it only returns undefined.
$(function(){
$("#changeColor").click(function(){
var color = $("#colorChoice").value
$("h1").css("color" + '"' + color + "'")
});
});
</script>
</head>
<html>
<body>
<h1>This is the default text</h1>
<form>
<fieldset>
<select id="changeFont">
<option>Arial</option>
<option>Georgia</option>
<option>Helevtica</option>
</select>
<input type="color" id="colorChoice">
<button id="changeColor" class="btn-primary pull-right">Change</button>
</fieldset>
</form>
975
Try var color = $("#colorChoice").val(); See jQuery docs
You might as well bind your callback on the onChange event instead of the onClick event:
$("#colorChoice").change(function(){
$("h1").css('background', $(this).val());
});
Working sample
113
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
