I am trying to get the following javascript to change the content of the textareas depending on what is selected in the dropdown boxes. http://jsfiddle.net/73udajhm/
The Javascript:
$(function () {
$("#fontsize").on('change', function () {
$('.address').css('font-size', $(this).val() + 'px');
});
});
$(function () {
$("#fonttype").on('change', function () {
$('.address').css('font-family', $(this).val());
});
});
$(function () {
$("#fontweight").on('change', function () {
$('.address').css('font-weight', $(this).val());
});
});
The HTML:
Font Size:
<select id="fontsize">
<option>-</option>
<option value="24">24</option>
<option value="16">16</option>
</select>
<br />Font Type:
<select name="fonttype">
<option>-</option>
<option value="verdana">Verdana</option>
<option value="arial">Arial</option>
</select>
<br />Font Weight:
<select id="fontweight">
<option>-</option>
<option value="bold">Bold</option>
<option value="regular">Regular</option>
</select>
<div>
<textarea id="label" class='address'>Hello 123</textarea>
<textarea class='address'>Hello 123</textarea>
</div>
Just check your coding.
The family doesn't work because you set name
instead of id
on the font type selector.
And regular
should be normal
for font-weight
Could be shortened to single function by adjusting html
, js
; setting id
of element to property to be set at css
; substituting normal
for regular
at fontFamily
element ; using RegExp.prototype.test()
to check for digit in value of element to return length value including "px"
or string of select
value when setting css
value.
html
Font Size:
<select name="fontSize" id="fontSize">
<option>-</option>
<option value="24">24</option>
<option value="16">16</option>
</select>
<br />Font Type:
<select name="fontFamily" id="fontFamily">
<option>-</option>
<option value="verdana">Verdana</option>
<option value="arial">Arial</option>
</select>
<br />Font Weight:
<select name="fontWeight" id="fontWeight">
<option>-</option>
<option value="bold">Bold</option>
<option value="normal">Normal</option>
</select>
<div>
<textarea id="label" class='address'>Hello 123</textarea>
<textarea class='address'>Hello 123</textarea>
</div>
js
$(function () {
$("[id^=font]").on("change", function () {
$(".address")
.css(this.id, /\d/.test(this.value) ? this.value + "px" : this.value);
});
});
jsfiddle http://jsfiddle.net/73udajhm/6/
I think this is the cleanest version:
$(function() { $("select").on('change', function() { var $property = $(this).attr('name'); var $value = $(this).data("sufix") ? $(this).val() + $(this).data("sufix") : $(this).val(); $('.address').css($property, $value); }); });
Font Size: <select name="font-size" data-sufix="px"> <option>-</option> <option value="24">24</option> <option value="16">16</option> </select> <br />Font Type: <select name="font-family"> <option>-</option> <option value="Verdana">Verdana</option> <option value="Arial">Arial</option> </select> <br />Font Weight: <select name="font-weight"> <option>-</option> <option value="bold">Bold</option> <option value="normal">Normal</option> </select> <div> <textarea id="label" class='address'>Hello 123</textarea> <textarea class='address'>Hello 123</textarea> </div>
Cheers!
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.