Jake Kovinsky
Jake Kovinsky

Reputation: 37

Resizing font size in javascript based off input from user

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

Answers (3)

olaven
olaven

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

Amthieu
Amthieu

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

CodeF0x
CodeF0x

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

Related Questions