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>
Use OnClick() event for the button click & for moving the slider, use OnChange() event. In the case of a button click, use the DOM to access the <div> tag for changing the value of the font-size attribute from javascript itself.
To change font size in JavaScript, do this: element. style. fontSize = '10px' .
How to Change Font Size in HTML. To change font size in HTML, use the CSS font-size property. Set it to the value you want and place it inside a style attribute. Then add this style attribute to an HTML element, like a paragraph, heading, button, or span tag.
Simply use a css style in the paragraph. "font-size" does the job.
In this effect there are two case for font-size change 1: by click button “click to change font-size” 2: by Click buton “click to google font-size” For frist caseI am adding a css for font-size using java script to increase the font=size by javascript.
Change the font size of a button with CSS. To change the font size of a button, use the font-size property. You can try to run the following code to change the font size.
click a button to change text font-size of <body> in javascript/css. Increase font size of whole web page on button click event using jquery. Increase the font size with a click of a button using only JavaScript.
Thank you. Using JavaScript to change font-size programatically on each individual element is a bad design decision. Styling is best done by combination of CSS stylesheets and programmatic addition/removal of semantic classes to elements using 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.
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>
$(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>
const button = document.querySelector('.bigger');
button.addEventListener('click', function(e) {
const newFontSize =
parseFloat(getComputedStyle(e.currentTarget).fontSize) + 1;
e.currentTarget.style.fontSize = `${newFontSize}px`;
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With