Reputation: 37
I was wondering how you can resize text size in javascript based off of user input. Say for example, if the input exceeds 1000000000, then set text size to 14. The userinput in this case would be the Price and the size I would like to modify is the the TotalAmount and TipAmount.
Upvotes: 0
Views: 2669
Reputation: 186
You may apply styles with JS.
Given that input and outputs are strings:
if(price > 10000){outputElement.style.fontSize = "0.8em"}
Upvotes: 0
Reputation: 154
Is that what you are looking for?
var priceInput = document.getElementById('price-input');
priceInput.addEventListener('input', function(e) {
var price = parseInt(e.target.value);
priceInput.style.fontSize = price > 10 ? "14px" : "10px";
});
<input id="price-input" />
Upvotes: 1
Reputation: 2682
Like this?
function changeTextSize() {
var input = document.getElementById('input').value;
document.getElementById('text').style.fontSize = input + "px";
}
<p id="text">I am some text.</p>
<input type="text" onkeyup="changeTextSize()" id="input">
Or like this?
function changeTextSize() {
var input = document.getElementById('input').value;
if (input > 1000) {
document.getElementById('text').style.fontSize = 30 + "px"; // Changed 14 to 30, because 14 would be smaller than the default text size
}
}
<p id="text">I am some Text</p>
<input type="text" onkeyup="changeTextSize()" id="input">
Upvotes: 2