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, Jul 28 '16 at 05:37

score 20 · Accepted Answer · answered Apr 20 '17 at 07:51

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.

score 2 · Answer 2 · answered Jul 28 '16 at 05:58

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>

score 1 · Answer 3 · answered Jun 01 '17 at 02:35

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>

score 1 · Answer 4 · answered May 06 '20 at 18:08

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 06 '20 at 18:08

Mamunur Rashid

1,095
17
28

Did you test it? – Steak Overflow May 06 '20 at 19:47
2

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. – lordhog May 06 '20 at 23:34

score 0 · Answer 5 · answered Jul 28 '16 at 05:49

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>

Is it possible to achieve without jQuery? – canecorso Jul 28 '16 at 05:54 — canecorso, Jul 28 '16 at 05:54

score 0 · Answer 6 · answered Nov 09 '17 at 13:07

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

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. — Captain Hypertext, Nov 09 '17 at 13:19

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

6 Answers6

Cycle through different font sizes by clicking on an element

Linked

Related