CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user7791702
user7791702

Reputation: 290

How can I update fonts-size dynamically using jquery?

I want to update font size dynamically so I have created this code but the problem is it is not working.

var font_size = 36;
$('#content').on('click', function(){

  $('#editor').css('display', 'block');

  var numbersValue = "<input type=\"number\" id=\"input-fz\" value="+font_size+">";


var currentValue = $(numbersValue).prop('value');
  var eleId = $(numbersValue).prop('id');
     $(eleId).change(function(event) {
      /* Act on the event */
      newValue = $(this).val();
      newvalueFonts = newValue;
      $('h1').css('font-size', newvalueFonts);
    });

$('#result').html(numbersValue)

})

Here is my fiddle

Upvotes: 0

Views: 1687

Answers (5)

brk
brk

Reputation: 50291

Probably three changes required

  1. Use # for id selector;
  2. Delegate the event from body to the input element.
  3. Add a unit like px as unit for font-size

var font_size = 36;
$('#content').on('click', function() {

  $('#editor').css('display', 'block');

  var numbersValue = "<input type=\"number\" id=\"input-fz\" value=" + font_size + ">";

  var currentValue = $(numbersValue).prop('value');

  var eleId = $(numbersValue).prop('id');
   // Implementing point 1,2
  $('body').on('change', '#' + eleId, function(event) {

    /* Act on the event */
    newValue = $(this).val();
    newvalueFonts = newValue;
     // implementing point 3
    $('h1').css('font-size', newvalueFonts + 'px');
  });

  $('#result').html(numbersValue)

})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 id="content">
  Some Content Here
</h1>

<div id="editor" style="display:none">
  <div id="result"></div>
</div>

Upvotes: 3

Sani
Sani

Reputation: 11

replace your existing code with matching lines

 $('#'+eleId).change(function(event) {
  /* Act on the event */
  newValue = $(this).val();
  newvalueFonts = newValue;
 // alert(newvalueFonts);
  $('h1').css('font-size', newvalueFonts+'px');

as you not mentioned selector and you have to add px wih font size as font size is set in pixels

Upvotes: 1

admcfajn
admcfajn

Reputation: 2083

& If Possible, you could switch out the templated element.

<h1 id="content">
  Some Content Here
</h1>

<div id="editor" style="display:none">
    <input type="number" id="input-fz">
</div>

<script>
var font_size = 36;
$('#content').on('click', function(){

    $('#editor').css('display', 'block');
    $('#input-fz').val(font_size);

    $('#input-fz').change(function(event) {
      /* Act on the event */
      newValue = $(this).val().toString()+'px';
      $('h1').css('font-size', newValue);
    });

});
</script>

Upvotes: 2

MH2K9
MH2K9

Reputation: 12039

Your selector is wrong. It should be $('#' + eleId) instead of $(eleId). You also have to add px after font-size like $('h1').css('font-size', newvalueFonts + 'px'). Updated of your script.

var font_size = 36;
$('#content').on('click', function(){

$('#editor').css('display', 'block');
var numbersValue = "<input type=\"number\" id=\"input-fz\" value="+font_size+">";

$('#result').html(numbersValue);

var currentValue = $(numbersValue).prop('value');
var eleId = $(numbersValue).prop('id');

 $('#' + eleId).change(function(event) { // Modified here
      /* Act on the event */
      newValue = $(this).val();

      newvalueFonts = newValue;
      $('h1').css('font-size', newvalueFonts + 'px'); // Modified here
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 id="content">
  Some Contetn Here
</h1>

<div id="editor" style="display:none">
    <div id="result"></div>
</div>

Upvotes: 1

Rayon
Rayon

Reputation: 36609

Your ID selector is wrong, you are missing #

$(eleId) should be $('#'+eleId)

Also note, you should be passing +'px' as unit for font-size

By the time you are accessng the element using ID selector, Element is not present in DOM, use html() method before accessing element using jQuery

var font_size = 36;
$('#content').on('click', function() {
  $('#editor').css('display', 'block');
  var numbersValue = "<input type=\"number\" id=\"input-fz\" value=" + font_size + ">";
  var currentValue = $(numbersValue).prop('value');
  var eleId = $(numbersValue).prop('id');
  $('#result').html(numbersValue);
  $('#' + eleId).change(function(event) {
    var newValue = $(this).val();
    $('h1').css('font-size', newValue + 'px');
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h1 id="content">
  Some Contetn Here
</h1>

<div id="editor" style="display:none">
  <div id="result"></div>
</div>

Upvotes: 2

Related Questions