Question 194350 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Font size changing buttons

I’m trying to implement buttons in order to allow users to increase/decrease font size on a website.
This is the website: https://font-size-d27117.webflow.io/
I use REM everywhere, for font and for images. I’d like to change only font sizes, but not images.

I’ve found the script. It seems to be simple but doesn’t work.

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>

$('#font-size-plus').on('click', function() 
{
  var fontSize = $('body').css('font-size');
  console.log(fontSize);
  var newFontSize = parseInt(fontSize) + 1;

  $('body').css('font-size', newFontSize + 'px')
})

$('#font-size-minus').on('click', function() 
{
  var fontSize = $('body').css('font-size');
  var newFontSize = parseInt(fontSize) - 1;

  $('body').css('font-size', newFontSize + 'px')
})

$('#_reset').on('click', function() {
  $('body').css('font-size', '1')
})
</script>

In the above script I see px instead of rems.

I tried to change PX to REM and step from 1px to 0.1rem

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>

$('#font-size-plus').on('click', function() 
{
  var fontSize = $('body').css('font-size');
  console.log(fontSize);
  var newFontSize = parseInt(fontSize) + 0.1;

  $('body').css('font-size', newFontSize + 'rem')
})

$('#font-size-minus').on('click', function() 
{
  var fontSize = $('body').css('font-size');
  var newFontSize = parseInt(fontSize) - 0.1;

  $('body').css('font-size', newFontSize + 'rem')
})

$('#_reset').on('click', function() {
  $('body').css('font-size', '1'  + 'rem')
})
</script>

None of these scripts work.

Could anyone help?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I've implemented @Lionel Rowe advice. IT seems to work. Final effect: font-size-d27117.webflow.io


  2. 0

    You have 2 main problems:

    1. The event handlers aren’t getting added, as the script runs immediately but the +/- button elements aren’t present when it runs. The fix is to wrap your jQuery code in $(() => { ... }), which causes it to run only once the DOM is loaded.
    2. You’re setting the font size of body, not html. rem units are based on the root size, which for an HTML document is the html element.

    There are a few other issues in your code (invalid HTML etc.), but here’s a simplified version that works:

    $(() => {
  $('#font-size-plus').on('click', function() {
    var fontSize = $('html').css('font-size');
    var newFontSize = parseInt(fontSize) + 1;

    $('html').css('font-size', newFontSize + 'px');
  });

  $('#font-size-minus').on('click', function() {
    var fontSize = $('html').css('font-size');
    var newFontSize = parseInt(fontSize) - 1;

    $('html').css('font-size', newFontSize + 'px');
  });

  $('#_reset').on('click', function() {
    $('html').css('font-size', '16px');
  });
});
    .font-16px {
  font-size: 16px;
}

.font-1rem {
  font-size: 1rem;
}

.font-2rem {
  font-size: 2rem;
}

.font-3rem {
  font-size: 3rem;
}
    <html style="font-size: 16px">
  <head>
    <meta charset="utf-8">
    <title>font size</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  </head>
  <body>
    <div class="font-16px">
      <button id="font-size-plus">+</button>
      <button id="font-size-minus">-</button>
      <button id="_reset">Reset</button>
    </div>
    <div class="font-1rem">1 rem</div>
    <div class="font-2rem">2 rem</div>
    <div class="font-3rem">3 rem</div>
  </body>
</html>

    Note that setting the font size on html affect all measurements that use rem values, regardless of whether they’re font sizes, images, etc. You can see this difference in the div housing the control buttons themselves, which sets its font size in px instead so always remains at the same font size.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search