Setting an options value as a style tag value using JQuery

Question

I'm relatively new to jQuery, and I'm trying to get the option value to pull in as a font size value for the 'previewtext' class as inline styling.

My code works fine when it's a set value such as 8px, but when I want it as a variable, nothing happens.

<div class="textsize">
  <select class="form-control" name="fontSize">
      <option value="Size">Size</option>
      <option value="8">8</option>
      <option value="10">10</option>
      <option value="12">12</option>
      <option value="14">14</option>
      <option value="16">16</option>
      <option value="18">18</option>
      etc...
  </select>
</div>

<div class="previewtext">
    the quick brown fox jumps over the lazy dog 
</div>

<script>
    $(document).ready(function() {
       $("select.form-control").change(function(){
           var fontSize = $(this).val();
           $("div.previewtext").css({"font-size": "fontSize"px});
       });
    });
</script>

Any help would be greatly appreciated.

-Jordan

try this `.css({"font-size": + fontSize +"px"});` – Rayees AC Sep 04 '20 at 04:30 — Rayees AC, Sep 04 '20 at 04:30

score 0 · Accepted Answer · answered Sep 03 '20 at 21:40

0

$(document).ready(function() {
   $("select.form-control").change(function(){
       var fontSize = $(this).val();
       $("div.previewtext").css({"font-size": fontSize+"px"});
   });
});

Hey Jordan, You can try again with this code.

answered Sep 03 '20 at 21:40

Roman Gavrilov

620
4
17

1

This works but I would handle the string concatenation with [template literals](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals) – Sep 03 '20 at 21:43

score 0 · Answer 2 · answered Sep 03 '20 at 22:50

The issue is with string concatenation. One approach would be to use template literals as shown below by changing:

....css({"font-size": "fontSize"px});

To:

....css({"font-size": `${fontSize}px`});

DEMO

$(document).ready(function() {
       $("select.form-control").change(function(){
           var fontSize = $(this).val();
           $("div.previewtext").css({"font-size": `${fontSize}px`});
       });
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="textsize">
  <select class="form-control" name="fontSize">
      <option value="Size">Size</option>
      <option value="8">8</option>
      <option value="10">10</option>
      <option value="12">12</option>
      <option value="14">14</option>
      <option value="16">16</option>
      <option value="18">18</option>
      etc...
  </select>
</div>

<div class="previewtext">
    the quick brown fox jumps over the lazy dog 
</div>

Setting an options value as a style tag value using JQuery

2 Answers2