I am attempting to utilize the text-shadow property by taking user-supplied values and updating it using JQuery. Below is my code:
HTML Code
<td width="13%">
H-Shadow::<input id="hshadow" onchange="setShadow();"/>
</td>
<td width="13%">
V-Shadow::<input id="vshadow" onchange="setShadow();"/>
</td>
<td width="12%">
Blur::<input id="blur" onchange="setShadow();"/>
</td>
<td width="12%">
Color::<input id="shadowcolor" class="color" onchange="setShadow();"/>
</td>
My setShadow function is as shown below
function setShadow() {
var horShadow = document.getElementById('hshadow');
var verShadow = document.getElementById('vshadow');
var blurShadow = document.getElementById('blur');
var colorShadow = document.getElementById('shadowcolor');
$('.blue3d > textarea').css('textShadow', horShadow.value+"px "+verShadow.value+"px "+blurShadow.value+"px "+'#'+colorshadow.color);
}
In addition, for selecting a color, I am using the jscolor picker on the 4th input field. To enable this functionality, I have added the class "color" to the 4th input field. For more information about the jscolor picker, you can visit jsColor.
Can you help me identify where I might be making an error?