Javascript Increase and Decrease Font Size

Question

I am new to JavaScript. I would like to add to add two buttons for my visitors to control font size. I would like to include two tags - 'p' and 'blockquote". Can you please help me edit this code in order to include both?

var min = 8;
var max = 18;

function increaseFontSize() {
  var p = document.getElementsByTagName('p');
  for (i = 0; i < p.length; i++) {
    if (p[i].style.fontSize) {
      var s = parseInt(p[i].style.fontSize.replace("px", ""));
    } else {
      var s = 12;
    } if (s != max) {
      s += 1;
    }
    p[i].style.fontSize = s + "px"
  }
}

function decreaseFontSize() {
  var p = document.getElementsByTagName('p');
  for (i = 0; i < p.length; i++) {
    if (p[i].style.fontSize) {
      var s = parseInt(p[i].style.fontSize.replace("px", ""));
    } else {
      var s = 12;
    } if (s != min) {
      s -= 1;
    }
    p[i].style.fontSize = s + "px"
  }
}

Thank you.

Answer 1

Here's a working version:

I took the liberty of refactoring a bit the functions to make the code more parameterized.

function changeFontSize(delta) {
  var tags = document.querySelectorAll('p,blockquote');
  for (i = 0; i < tags.length; i++) {
    if (tags[i].style.fontSize) {
      var s = parseInt(tags[i].style.fontSize.replace("px", ""));
    } else {
      var s = 12;
    } if (s != max) {
      s += delta;
    }
    tags[i].style.fontSize = s + "px"
  }
}

function increaseFontSize() {
  changeFontSize(1);
}

function decreaseFontSize() {
  changeFontSize(-1);
}

Answer 2

Instead of using:

p = document.getElementsByTagName('p');

you could, instead use:

elems = document.querySelectorAll('p, blockquote');

(the variable name is irrelevant, and was changed only because the elements are no longer exclusively <p> elements):

function increaseFontSize() {
  var elems = document.querySelectorAll('p, blockquote');
  for (i = 0; i < elems.length; i++) {
    if (elems[i].style.fontSize) {
      var s = parseInt(elems[i].style.fontSize.replace("px", ""));
    } else {
      var s = 12;
    } if (s != max) {
      s += 1;
    }
    elems[i].style.fontSize = s + "px"
  }
}

var min = 8;
var max = 18;

function increaseFontSize() {
  var elems = document.querySelectorAll('p, blockquote');
  for (i = 0; i < elems.length; i++) {
    if (elems[i].style.fontSize) {
      var s = parseInt(elems[i].style.fontSize.replace("px", ""));
    } else {
      var s = 12;
    } if (s != max) {
      s += 1;
    }
    elems[i].style.fontSize = s + "px"
  }
}

function decreaseFontSize() {
  var elems = document.querySelectorAll('p, blockquote');
  for (i = 0; i < elems.length; i++) {
    if (elems[i].style.fontSize) {
      var s = parseInt(elems[i].style.fontSize.replace("px", ""));
    } else {
      var s = 12;
    } if (s != min) {
      s -= 1;
    }
    elems[i].style.fontSize = s + "px"
  }
}

document.querySelector('#increase').addEventListener('click', increaseFontSize);


document.querySelector('#decrease').addEventListener('click', decreaseFontSize);

<button id="increase">&uarr;A</button>
<button id="decrease">A&darr;</button>
<p>Some text to have its text adjusted by the buttons just up there.</p>

<blockquote>Some text in a blockquote</blockquote>

The querySelectorAll() method accepts CSS-style selectors, and returns a (non-live) NodeList, and is supported in all modern browsers, including IE from version 8 onwards.

That said, it's probably better to increase the font-size of the <body> element, otherwise font-adjustment is redundant (since other elements will still be unclear), so, instead, I'd suggest:

function increaseFontSize() {
  // retrieving, and caching, the <body> element:
  var body = document.body,
      // finding the current computed fontSize of the <body> element, parsing it
      // as a float (though parseInt() would be just as safe, really):
      currentFontSize = parseFloat(window.getComputedStyle(body, null).fontSize);

  // if the currentFontSize is less than the specified max:
  if (currentFontSize < max) {
    // we set the fontSize of the <body> to the incremented fontSize,
    // increasing the current value by 1, and concatenating with the 'px' unit:
    body.style.fontSize = ++currentFontSize + 'px';
  }
}

function decreaseFontSize() {
  var body = document.body,
      currentFontSize = parseFloat(window.getComputedStyle(body, null).fontSize);

  if (currentFontSize > min) {
    body.style.fontSize = --currentFontSize + 'px';
  }
}

var min = 8;
var max = 18;

function increaseFontSize() {
  var body = document.body,
      currentFontSize = parseFloat(window.getComputedStyle(body, null).fontSize);
  
  if (currentFontSize < max) {
    body.style.fontSize = ++currentFontSize + 'px';
  }
}

function decreaseFontSize() {
  var body = document.body,
      currentFontSize = parseFloat(window.getComputedStyle(body, null).fontSize);
  
  if (currentFontSize > min) {
    body.style.fontSize = --currentFontSize + 'px';
  }
}

document.querySelector('#increase').addEventListener('click', increaseFontSize);


document.querySelector('#decrease').addEventListener('click', decreaseFontSize);

<button id="increase">&uarr;A</button>
<button id="decrease">A&darr;</button>
<p>Some text to have its text adjusted by the buttons just up there.</p>

<blockquote>Some text in a blockquote</blockquote>

References:

Javascript Increase and Decrease Font Size

2 Answers

Must Read

Your Answer

Maya Lin-Takahashi

Javascript Increase and Decrease Font Size

2 Answers

Must Read

Your Answer

Sign up or log in

Post as a guest

Maya Lin-Takahashi