CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Randy Thomas
Randy Thomas

Reputation: 343

Change font-size When Selection is made

I need to change the font-size in a div when someone selects a different font size.

Here is my code which I know is working because I added an alert to it. The only thing not working is it changing the font size.

CSS:

.heading {
font-size:18px;
 }

JAVASCRIPT:

$('#htsize').on('change', function (e) {
var optionSelected = $("option:selected", this);
var valueSelected = this.value;
$(".heading").css("font-size", valueSelected);
});

HTML:

<SELECT id="htsize" name="htsize" style="width:100px; font-size:10px;">
<option value=""> SELECT ONE </option>
<option value="12">12px</option>
<option value="13">13px</option>
<option value="14">14px</option>
<option value="15">15px</option>
<option value="16">16px</option>
<option value="17">17px</option>
<option value="18">18px</option>
<option value="19">19px</option>
<option value="20">20px</option>
<option value="21">21px</option>
<option value="22">22px</option>
<option value="23">23px</option>
<option value="24">24px</option>
<option value="25">25px</option>
<option value="26">26px</option>
<option value="27">27px</option>
<option value="28">28px</option>
<option value="29">29px</option>
<option value="30">30px</option>
</select>

<div id="headline2" class="heading" style="position: relative; zindex: 99; width: 220px; padding: 5px; color: #ffffff; text-align: center;"></div>

I just can't figure out what is wrong.

Upvotes: 5

Views: 415

Answers (6)

perumal N
perumal N

Reputation: 651

Try this

<SELECT id="htsize" name="htsize" style="width:100px; font-size:10px;">
<option value=""> SELECT ONE </option>
<option value="12">12px</option>
<option value="13">13px</option>
<option value="14">14px</option>
<option value="15">15px</option>
<option value="16">16px</option>
<option value="17">17px</option>
<option value="18">18px</option>
<option value="19">19px</option>
<option value="20">20px</option>
<option value="21">21px</option>
<option value="22">22px</option>
<option value="23">23px</option>
<option value="24">24px</option>
<option value="25">25px</option>
<option value="26">26px</option>
<option value="27">27px</option>
<option value="28">28px</option>
<option value="29">29px</option>
<option value="30">30px</option>
</select>

<div id="headline2" class="heading" style="">My Headline</div>

Jquery

 $('#htsize').change(function(event){
      var optval= $(this).val();
      var optpx= optval + 'px';
      $("#headline2").css("font-size", optpx);
    });

Upvotes: 0

eatherpro
eatherpro

Reputation: 63

You need to add the "px" on the css font-size value! Here it's working - 

<h1>Hello, World!</h1>

<select>
<option value="12">Default</option>
<option value="14">14 PX</option>
<option value="16">16 PX</option>
<option value="18">18 PX</option>
<option value="20">20 PX</option>
</select>

$("select").on("change", function (e) {
    var optionSelectedValue;
    $( "select option:selected" ).each(function() {
      optionSelectedValue = $( this ).val();
    });
    $("h1").css("font-size", optionSelectedValue + "px");
});

Upvotes: 1

ak3433
ak3433

Reputation: 11

$(".heading").css("font-size", valueSelected + 'px');

https://jsfiddle.net/ffpxgqy2/

Upvotes: 1

LXhelili
LXhelili

Reputation: 980

Add px as the following code: 

$('#htsize').on('change', function (e) {
    var optionSelected = $("option:selected", this);
    var valueSelected = this.value;
    $(".heading").css("font-size", valueSelected + 'px');
});

Upvotes: 1

CodeLikeBeaker
CodeLikeBeaker

Reputation: 21312

You are missing the "px" from your value. So you can add it to the values of your dropdown or append it in your script like so:

$('#htsize').on('change', function(e) {
  var optionSelected = $("option:selected", this);
  var valueSelected = this.value + "px";
  $(".heading").css("font-size", valueSelected);
});
.heading {
  font-size: 18px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<SELECT id="htsize" name="htsize" style="width:100px; font-size:10px;">
<option value=""> SELECT ONE </option>
<option value="12">12px</option>
<option value="13">13px</option>
<option value="14">14px</option>
<option value="15">15px</option>
<option value="16">16px</option>
<option value="17">17px</option>
<option value="18">18px</option>
<option value="19">19px</option>
<option value="20">20px</option>
<option value="21">21px</option>
<option value="22">22px</option>
<option value="23">23px</option>
<option value="24">24px</option>
<option value="25">25px</option>
<option value="26">26px</option>
<option value="27">27px</option>
<option value="28">28px</option>
<option value="29">29px</option>
<option value="30">30px</option>
</select>

<div id="headline2" class="heading" style="">My Headline</div>

Upvotes: 4

Bohdan Didukh
Bohdan Didukh

Reputation: 1306

You need to add px to the every option value or valueSelected+'px'

Upvotes: 8

Related Questions