Increase the font size with a click of a button using only JavaScript
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.
const button = document.querySelector('.bigger');
button.addEventListener('click', function(e) {
const newFontSize =
parseFloat(getComputedStyle(e.currentTarget).fontSize) + 1;
e.currentTarget.style.fontSize = `${newFontSize}px`;
});
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>
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>