CODEWITHSUNDEEP
javascriptjqueryhtmlcss
David A
David A

Reputation: 88

Changing font-family font-size and font-weight with javascript not working?

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>

Upvotes: 0

Views: 1032

Answers (3)

guest271314
guest271314

Reputation: 1

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/

Upvotes: 2

rista404
rista404

Reputation: 7787

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!

Upvotes: 1

TwilightSun
TwilightSun

Reputation: 2335

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

Upvotes: 2

Related Questions