CODEWITHSUNDEEP
javascripthtmlcss
Coolsugar
Coolsugar

Reputation: 170

Setting Up Custom Font Size Using Textarea, Button and javascript

I am trying to set up some code, where the user can enter a number into a <textartea> and click a button, which will set the font size of another <textarea> by editing the Styleattribute. I tried the following:

<h2>Set Font</h2>
<textarea id='input'></textarea>
<button onclick ="myFunction()">Click</button>
<textarea id='MainText' style="font-size:18px;"></textarea>
<script>
function myFunction(){
  var InputValue = document.getElementById('input').value;
  document.getElementById('MainText').style.font-size = 'InputValue';
  alert('Font Size Changed to ${InputValue}')
}

I am not sure what to do.

Upvotes: 0

Views: 280

Answers (2)

Asad Gulzar
Asad Gulzar

Reputation: 672

you should use fontSize instead of font-size and inputValue as variable not string e.g

document.getElementById('MainText').style.fontSize = inputValue + 'px';

Upvotes: 1

MarketMan39
MarketMan39

Reputation: 208

some syntax errors here. You are using JS to do this so you need to camelCase fontSize. Also, you are assigning it to a String when you should be assigning it to the variable name so get rid of those quotes. Also, you are interpolating the variable incorrectly in your alert: alert('Font Size Changed to ${InputValue}') You need to use backticks for this, not single quotes

var InputValue = document.getElementById('input').value;
document.getElementById('MainText').style.font-size = 'InputValue';

should be:

var inputValue = document.getElementById('input').value;
document.getElementById('MainText').style.fontSize = inputValue + 'px';

Upvotes: 1

Related Questions