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.
32 Answers
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); } 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>↑A</button> <button>A↓</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>↑A</button> <button>A↓</button> <p>Some text to have its text adjusted by the buttons just up there.</p> <blockquote>Some text in a blockquote</blockquote>References:
