Html - How to change font-size by limiting it to increase or decrease twice using vanilla JS

ElaineByene
March 18, 2024
272 views
2 votes
3 Answers

Currently, I’m able to change the font size once: decrease (-A), default (A) or Increase (A+). If I click the buttons more than once, it does nothing.

What I want is to be able to increase/decrease the font size but limiting it to clicking twice so the font size doesn’t go beyond -/+ 150%.

Example: When I click on -A, the font size reduces to 0.75em. I want this to further reduce it to 0.5em if someone clicks it again but that should be the minimum size it can go. Likewise, font size is increased to 1.25em when A+ is clicked but should not increase beyond 1.5em if a user clicks multiple times.

Demo: https://jsfiddle.net/etfcdu10/

HTML:

<button type="button" onclick="changeSizeByBtn(0.75)" name="btn1">-A</button>
<button type="button" onclick="changeSizeByBtn(1)" name="btn2">A</button>
<button type="button" onclick="changeSizeByBtn(1.25)" name="btn3">A+</button>
<hr />
<div id="container">
  <h1>This is the title</h1>
  <h2>This is a sub title</h2>
  <p>I need to increase the texts here by clicking on A+ button and decrease them by clicking -A button above. <br />
The problem here is that it increase/decrease only once. I want it to increase or decrease twice by say 25%. Not Thrice but just twice. How can I go about doing this?</p>
</div>

JS:

var cont = document.getElementById("container");
function changeSizeByBtn(size) {
  cont.style.fontSize = size + "em";
}

CSS:

div {
  padding: 20px;
  border: 5px solid red;  
}
h1 {
  font-size: 2em;
}
h2 {
  font-size: 1.5em;
}
p {
  font-size: 1em;
}

Answers

Instead of setting the size, make your function change it by the specified amount. Start by changing the values in your HTML:

<button type="button" onclick="changeSizeByBtn(-0.25)" name="btn1">-A</button>
<button type="button" onclick="changeSizeByBtn(0)" name="btn2">A</button>
<button type="button" onclick="changeSizeByBtn(0.25)" name="btn3">A+</button>

Then, modify your function to change the size accordingly:

var cont = document.getElementById("container");
function changeSizeByBtn(size) {
  // Start by checking if the value provided is zero, which means we want to reset the size
  if (size === 0) {
      cont.style.fontSize = "1em";
      return;
  }
  // Next, we will make sure that the new size doesn't exceed our boundaries (in this case, 0.5em and 1.5em)
  const newSize = parseFloat(cont.style.fontSize.match(/d+.?(?:d+)?/)[0]) + size;
  if (newSize <= 1.5 && newSize >= 0.5) {
    // It doesn't, so lets change the size
    cont.style.fontSize = newSize + "em";
  }
}

Here’s the final code:

var cont = document.getElementById("container");
function changeSizeByBtn(size) {
  // Start by checking if the value provided is zero, which means we want to reset the size
  if (size === 0) {
      cont.style.fontSize = "1em";
      return;
  }
  // Next, we will make sure that the new size doesn't exceed our boundaries (in this case, 0.5em and 1.5em)
  const newSize = parseFloat(cont.style.fontSize.match(/d+.?(?:d+)?/)[0]) + size;
  if (newSize <= 1.5 && newSize >= 0.5) {
    // It doesn't, so lets change the size
    cont.style.fontSize = newSize + "em";
  }
}

div {
  padding: 20px;
  border: 5px solid red;  
}
h1 {
  font-size: 2em;
}
h2 {
  font-size: 1.5em;
}
p {
  font-size: 1em;
}

<button type="button" onclick="changeSizeByBtn(-0.25)" name="btn1">-A</button>
<button type="button" onclick="changeSizeByBtn(0)" name="btn2">A</button>
<button type="button" onclick="changeSizeByBtn(0.25)" name="btn3">A+</button>
<hr />
<div id="container" style="font-size: 1em;">
  <h1>This is the title</h1>
  <h2>This is a sub title</h2>
  <p>I need to increase the texts here by clicking on A+ button and decrease them by clicking -A button above. <br />
The problem here is that it increase/decrease only once. I want it to increase or decrease twice by say 25%. Not Thrice but just twice. How can I go about doing this?</p>
</div>

if sizeChange is 1, then that means the reset button was pressed to return the text to normal size.

fontSizeMultiplier is updated by adding sizeChange to it, it can be positive or a negative number depending on if you are increasing or decreasing the size.

Keep track of increase and decrease counters separately numIncreases for increase counter and numDecreases for the decrease counter.

with this code, limit the counters

if (numIncreases >= 2 && sizeChange < 0) {
  numIncreases = 0;
} else if (numDecreases >= 2 && sizeChange > 0) {
  numDecreases = 0;
}

that to prevent the user from decreasing the text too much or the other way around

and finally apply the font size change like you were already doing

var cont = document.getElementById("container");
var fontSizeMultiplier = 1;
var numIncreases = 0;
var numDecreases = 0;

function changeSizeByBtn(sizeChange) {
  if (sizeChange === 1) {
    fontSizeMultiplier = 1;
    numIncreases = 0;
    numDecreases = 0;
  } else {
    fontSizeMultiplier += sizeChange;

    if (fontSizeMultiplier < 0.5) {
      fontSizeMultiplier = 0.5;
    } else if (fontSizeMultiplier > 1.5) {
      fontSizeMultiplier = 1.5;
    }

    if (sizeChange > 0) {
      numIncreases++;
    } else if (sizeChange < 0) {
      numDecreases++;
    }

    if (numIncreases >= 2 && sizeChange < 0) {
      numIncreases = 0;
    } else if (numDecreases >= 2 && sizeChange > 0) {
      numDecreases = 0;
    }
  }

  cont.style.fontSize = fontSizeMultiplier + "em";
}

div {
  padding: 20px;
  border: 5px solid red;  
}
h1 {
  font-size: 2em;
}
h2 {
  font-size: 1.5em;
}
p {
  font-size: 1em;
}

<button type="button" onclick="changeSizeByBtn(-0.25)" name="btn1">-A</button>
<button type="button" onclick="changeSizeByBtn(1)" name="btn2">A</button>
<button type="button" onclick="changeSizeByBtn(0.25)" name="btn3">A+</button>
<hr />
<div id="container">
  <h1>This is the title</h1>
  <h2>This is a sub title</h2>
  <p>I need to increase the texts here by clicking on A+ button and decrease them by clicking -A button above. <br />
The problem here is that it increase/decrease only once. I want it to increase or decrease twice by say 25%. Not Thrice but just twice. How can I go about doing this?</p>
</div>

Your code only allowed font size changes to occur once per button click.
The ‘changeSizeByBtn’ function represents the change in font size relative to the current size.

var cont = document.getElementById("container");
var currentFontSize = 1; // Initial font size
var clickCount = 0;

function changeSizeByBtn(sizeChange) {
  clickCount++;
  
  // Limiting the clicks to two
  if (clickCount > 2) return;

  // If sizeChange is 0, reset font size to default
  if (sizeChange === 0) {
    currentFontSize = 1;
  } else {
    // Updating the font size
    currentFontSize += sizeChange;
    
    // Limiting the font size to 0.5em minimum and 1.5em maximum
    if (currentFontSize < 0.5) currentFontSize = 0.5;
    if (currentFontSize > 1.5) currentFontSize = 1.5;
  }

  cont.style.fontSize = currentFontSize + "em";

  // Resetting click count after two clicks
  if (clickCount === 2) clickCount = 0;
}

div {
  padding: 20px;
  border: 5px solid red;  
}
h1 {
  font-size: 2em;
}
h2 {
  font-size: 1.5em;
}
p {
  font-size: 1em;
}

<button type="button" onclick="changeSizeByBtn(-0.25)" name="btn1">-A</button>
<button type="button" onclick="changeSizeByBtn(0)" name="btn2">A</button>
<button type="button" onclick="changeSizeByBtn(0.25)" name="btn3">A+</button> 


<hr />
<div id="container">
<h1>This is the title</h1>
<h2>This is a sub title</h2>
<p>I need to increase the texts here by clicking on A+ button and decrease them by clicking -A button above. <br />
The problem here is that it increase/decrease only once. I want it to increase or decrease twice by say 10%. Not Thrice but just twice. How can I go about doing this?
</p>
    </div>

Please signup or login to give your own answer.

Click here to cancel reply.

Html – How to change font-size by limiting it to increase or decrease twice using vanilla JS

Answers