Increase the font size with a click of a button using only JavaScript

Question

I'm attempting to increase the font size with the click of a button. I have got the first one to work but I can't get my head around the second one. The second one, every click will increase the font by 1px (I'm pretty much stuck):

<input type="button" value="Increase Font Size 100px" onclick="increaseFontSizeBy100px()">
<p id="a">Font Size</p>

<input type="button" value="Increase Font Size 1px" onclick="increaseFontSizeBy1px()">
<p id="b">Font Size by 1 Pixel</p>

<script> 
    function increaseFontSizeBy100px() {
        document.getElementById('a').style.fontSize = "100px";
    }

    function increaseFontSizeBy1px() {
        var font = document.getElementById('b').style.fontSize;            
        font++;
    }
</script>

document.getElementById('b').style.fontSize is a string, not a number you can increment, and even if you could, you’re not actually setting the font, you’re just incrementing some variable. — Sebastian Simon
– Sebastian Simon, Commented Jul 28, 2016 at 5:37

Lucas Dias · Accepted Answer · 2017-04-20 07:51:29Z

Change your function to as in the code below and see what happens:

function increaseFontSizeBy100px() {
    txt = document.getElementById('a');
    style = window.getComputedStyle(txt, null).getPropertyValue('font-size');
    currentSize = parseFloat(style);
    txt.style.fontSize = (currentSize + 100) + 'px';
}
function increaseFontSizeBy1px() {
    txt = document.getElementById('b');
    style = window.getComputedStyle(txt, null).getPropertyValue('font-size');
    currentSize = parseFloat(style);
    txt.style.fontSize = (currentSize + 1) + 'px';
}

Note: as you can see, there are a lot of duplication in both functions. Therefore, if I were you, I would change this function to increase the fontsize by a given value(in this case, an int).

So, what we can do about it? I think we should turn these functions into a more generic one.

Take a look at the code below:

function increaseFontSize(id, increaseFactor){
     txt = document.getElementById(id);
     style = window.getComputedStyle(txt, null).getPropertyValue('font-size');
     currentSize = parseFloat(style);
     txt.style.fontSize = (currentSize + increaseFactor) + 'px';
}

Now, for example, in your button "Increase Font Size 1px", you should put something like:

<input type="button" value="Increase Font Size 1px" onclick="increaseFontSize("b", 1)">
<p id="b">Font Size by 1 Pixel</p>

But, if we want a "Decrease Font Size 1px", what we can do? We call the function with -1 rather than with 1.

<input type="button" value="Decrease Font Size 1px" onclick="increaseFontSize("b", -1)">
<p id="b">Font Size by -1 Pixel</p>

We solve the Decrease Font Size problem as well. However, I would change the function name to a more generic one and call it in both two functions that I would create: increaseFontSize(id, increaseFactor) and decreaseFontSize(id, decreaseFactor).

That's it.

Jacoby Yarrow · Accepted Answer · 2016-07-28 05:58:01Z

2

Try this:

<input type="button" value="Increase Font Size 100px" onclick="increaseFontSizeBy100px()">
<p id="a">Font Size</p>

<input type="button" value="Increase Font Size 1px" onclick="increaseFontSizeBy1px()">
<p id="b">Font Size by 1 Pixel</p>

<script> 
    function increaseFontSizeBy100px() {
        document.getElementById('a').style.fontSize = "100px";
    }
    function increaseFontSizeBy1px() {
        var id = document.getElementById('b');
        var style = window.getComputedStyle(id, null).getPropertyValue('font-size');
        var currentSize = parseInt(style);
        currentSize++;
        document.getElementById('b').style.fontSize = currentSize.toString();
    }
</script>

answered Jul 28, 2016 at 5:58

Jacoby Yarrow

1551 silver badge13 bronze badges

Comments

Walter de Jong · Accepted Answer · 2017-06-01 02:35:23Z

1

Cycle through different font sizes by clicking on an element

$(document).ready(function() {
  $("#ModelIDBarcode").click(function() {
    newFontSize = incSize($('.barcode').css("font-size"), 10, 5, 120)
    $('.barcode').css("font-size", newFontSize);
  });
});

function incSize(currentSize, incr, min, max) {
  fSize = (parseFloat(currentSize) + incr) % max + min;
  return (fSize) + 'px';
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<label title="Click to increase size" id="ModelIDBarcode" class="barcode" style="font-family:'3 of 9 Barcode'; font-size:10px; background-color:white">
*ABarcodeValue*
</label>

answered Jun 1, 2017 at 2:35

Walter de Jong

1,6452 gold badges13 silver badges18 bronze badges

Comments

Mamunur Rashid · Accepted Answer · 2020-05-06 18:08:48Z

1

const button = document.querySelector('.bigger');
button.addEventListener('click', function(e) {
  const newFontSize =
    parseFloat(getComputedStyle(e.currentTarget).fontSize) + 1;
  e.currentTarget.style.fontSize = `${newFontSize}px`;
});

answered May 6, 2020 at 18:08

Mamunur Rashid

1,17719 silver badges38 bronze badges

2 Comments

Steak Overflow Over a year ago

Did you test it?

lordhog Over a year ago

While this code snippet may be the solution, including an explanation really helps to improve the quality of your post. Remember that you are answering the question for readers in the future, and those people might not know the reasons for your code suggestion.

Rinto Antony · Accepted Answer · 2016-07-28 05:49:05Z

0

Simple query

Font Size

<input type="button" value="Increase Font Size 1px" onclick="increaseFontSizeBy1px()">
<p id="b">Font Size by 1 Pixel</p>


<script> 
    function increaseFontSizeBy100px() {
        document.getElementById('a').style.fontSize = "100px";
    }
    function increaseFontSizeBy1px() {
    var font = parseInt($("#b").css('font-size'));

    font++;
     document.getElementById('b').style.fontSize =font+ "px";
    }
</script>

answered Jul 28, 2016 at 5:49

Rinto Antony

2971 silver badge10 bronze badges

1 Comment

canecorso Over a year ago

Is it possible to achieve without jQuery?

chaman gupta · Accepted Answer · 2017-11-09 13:07:35Z

0

$(document).ready(function() {
  $("#ModelIDBarcode").click(function() {
    newFontSize = incSize($('.barcode').css("font-size"), 10, 5, 120)
    $('.barcode').css("font-size", newFontSize);
  });
});

function incSize(currentSize, incr, min, max) {
  fSize = (parseFloat(currentSize) + incr) % max + min;
  return (fSize) + 'px';
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<label title="Click to increase size" id="ModelIDBarcode" class="barcode" style="font-family:'3 of 9 Barcode'; font-size:10px; background-color:white">
*ABarcodeValue*
</label>

answered Nov 9, 2017 at 13:07

chaman gupta

1

1 Comment

Captain Hypertext Over a year ago

Welcome to Stack Overflow! Please include some detail with your answer. What code did you change to produce this answer? What was the original poster doing wrong? Otherwise people will have to scan your code for the answer, and you may get down votes.

Tommaso Micini · Accepted Answer · 2023-10-11 19:31:37Z

Credits: I refer to answer by Jacoby Yarrow from Jul 28, 2016 at 5:58. I used it for practice. Here's the improvement.

Set the id where You want. If You want to implement size change to whole page, You can set the id to body id="TextLetterSizeChangeID". Or, if You want some other element, than set it to that element, like <p> or <span>. I removed toString(). I set the variables out of the functions. Also I gave the names to variables, functions and id that I find more associative.

<input type="button" value="Font + 1px" onclick="increaseSizeBy1px()">
<input type="button" value="Font - 1px" onclick="decreaseSizeBy1px()">
    
    <p id="TextLetterSizeChangeID"> Some example text where You will see the changes.</p>
    
    <script> 
    // extracting the current font-size, we'll get the value with word px, e.g. 16px
    
            let fontSizeCurr = window.getComputedStyle(TextLetterSizeChangeID, null).getPropertyValue('font-size');
    
    // with this we'll get rid of px; with pure number, math ops possible
    
            let fontSizeCurrPars = parseInt(fontSizeCurr);
    
            function increaseSizeBy1px() 
            {
                fontSizeCurrPars++;
                document.getElementById('TextLetterSizeChangeID').style.fontSize = 
                fontSizeCurrPars + "px";  
    // I needed to add + "px", otherwise it was not recognising new font size
    // e.g., it was just 16, and fontSize requires "px" to recognize, e.g. 16px
            }
    
            function decreaseSizeBy1px() 
            {
                fontSizeCurrPars--;
                document.getElementById('TextLetterSizeChangeID').style.fontSize = 
                fontSizeCurrPars + "px";  
            }
    
    </script>

Collectives™ on Stack Overflow

Increase the font size with a click of a button using only JavaScript

7 Answers 7

1 Comment

Comments

Cycle through different font sizes by clicking on an element

Comments

2 Comments

1 Comment

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

1 Comment

Comments

Cycle through different font sizes by clicking on an element

Comments

2 Comments

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related