Resizing font size in javascript based off input from user

Question

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.

I am not familiar with a switch statement but thank you for taking your time to respond — Jake Kovinsky
– Jake Kovinsky, Commented Apr 22, 2018 at 19:14
Please provide code of what you already tried and give a little more context. — Philipp Meissner
– Philipp Meissner, Commented Apr 22, 2018 at 19:16

CodeF0x · Accepted Answer · 2018-04-22 19:19:38Z

2

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">

answered Apr 22, 2018 at 19:19

CodeF0x

2,6676 gold badges19 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Amthieu · Accepted Answer · 2018-04-22 19:22:20Z

1

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" />

answered Apr 22, 2018 at 19:22

Amthieu

1541 silver badge9 bronze badges

Comments

olaven · Accepted Answer · 2018-04-22 19:28:02Z

0

You may apply styles with JS.

Given that input and outputs are strings:

if(price > 10000){outputElement.style.fontSize = "0.8em"}

edited Apr 22, 2018 at 19:28

answered Apr 22, 2018 at 19:14

olaven

1862 gold badges3 silver badges14 bronze badges

2 Comments

Luca Kiebel Over a year ago

14 is not a valid font-size value, developer.mozilla.org/en-US/docs/Web/CSS/font-size

olaven Over a year ago

Updating now :-) Thanks!

Collectives™ on Stack Overflow

Resizing font size in javascript based off input from user

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related