Change font size When selected

Question

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

Here is my code that I know works because I added a warning to it. The only thing that doesn't work is 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 understand what’s wrong.

Answer 1

You need to add px to each parameter or valueSelected + 'px'

Answer 2

You are missing the "px" from your value. Therefore, you can add it to the values ​​of your drop-down list or add it to your script as follows:

 $('#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> 

Answer 3

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'); }); 

Answer 4

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

https://jsfiddle.net/ffpxgqy2/

Answer 5

You need to add "px" to the css font size value! Here he works -

 <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"); }); 

Answer 6

Try

 <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); });