how to increase fontSize with a button?

Question

that's my code, I don't know why the + button doesn't increase. Everything seems correct to me. I created a function called incrementa() that should parse the value of the actual font size, and than increase the size of the font by 2 px.

function incrementa() {
  var modifArea = document.getElementById("inser"); //prendo l'id inser (textarea)
  var valTestoNum = parseInt(modifArea.style.fontSize); //trasformo il valore del font in int

  modifArea.style.fontSize = valTestoNum + 2 + "px"; // incremento di 2. Quindi creo una stringa nuova sommando il valore precedente del font size a 2 e concateno a stringa "px"
  console.log(modifArea.style.fontSize);
}

function decrementa() {
  var modifArea = document.getElementById("inser");
  var valTestoNum = parseInt(modifArea.style.fontSize);
  modifArea.style.fontSize = valTestoNum - 2 + "px";
  console.log(modifArea.style.fontSize);
}

#quadrato {
  text-align: center;
  /*centrare il form*/
}

#inser {
  font-family: Arial;
  height: 500px;
  width: 500px;
  font-size: 14px;
}

<div>
  <form id="quadrato" method="POST">
    <input type="button" value="+" onclick="incrementa()">
    <input type="button" value="-" onclick="decrementa()">
    <br>
    <textarea id="inser"></textarea>
    <br>
    <input type="button" name="salva" value="salva">
    <!--button o submit? -->
  </form>
</div>

The snippet editor consists of four sections: HTML, JavaScript, CSS and result. Why did you put all in HTML? -> [I've been told to create a “runnable” example with “Stack Snippets”, how do I do that?](https://meta.stackoverflow.com/questions/358992/ive-been-told-to-create-a-runnable-example-with-stack-snippets-how-do-i-do) — Andreas, Nov 06 '19 at 16:19

David · Answer 1 · 2019-11-06T16:26:15.113

You can use getComputedStyle function to get the value applied by the css rule:

function incrementa() {
  var modifArea = document.getElementById("inser"); //prendo l'id inser (textarea)
  var valTestoNum = parseInt(getComputedStyle(modifArea)['fontSize']); //trasformo il valore del font in int
  modifArea.style.fontSize = valTestoNum + 2 + "px"; // incremento di 2. Quindi creo una stringa nuova sommando il valore precedente del font size a 2 e concateno a stringa "px"
  console.log(modifArea.style.fontSize);



}

function decrementa() {
  var modifArea = document.getElementById("inser");
  var valTestoNum = parseInt(modifArea.style.fontSize);
  modifArea.style.fontSize = valTestoNum - 2 + "px";
  console.log(modifArea.style.fontSize);
}

#quadrato {
  text-align: center;
  /*centrare il form*/
}

#inser {
  font-family: Arial;
  height: 500px;
  width: 500px;
  font-size: 14px;
}

<div>
  <form id="quadrato" method="POST">
    <input type="button" value="+" onclick="incrementa()">
    <input type="button" value="-" onclick="decrementa()">
    <br>
    <textarea id="inser"></textarea>
    <br>
    <input type="button" name="salva" value="salva">
    <!--button o submit? -->
  </form>
</div>

Please use the `Tidy` button before posting your snippet to fix the format. — Andreas, Nov 06 '19 at 16:24
Thanks @Andreas! this will be superusefull i didn't notice that button — David, Nov 06 '19 at 16:26

score 0 · Answer 2 · answered Nov 06 '19 at 16:23

0

The problem you are facing is that .style reads the inline styles on an element, not the styles from a stylesheet. An easy fix is to set the style on the element inline: style="font-size: 14px"

function incrementa() {
  var modifArea = document.getElementById("inser");
  var valTestoNum = parseInt(modifArea.style.fontSize);
  modifArea.style.fontSize = valTestoNum + 2 + "px";
  console.log(modifArea.style.fontSize);
}

function decrementa() {
  var modifArea = document.getElementById("inser");
  var valTestoNum = parseInt(modifArea.style.fontSize);
  modifArea.style.fontSize = valTestoNum - 2 + "px";
  console.log(modifArea.style.fontSize);
}

#quadrato {
  text-align: center;
}

#inser {
  font-family: Arial;
  height: 500px;
  width: 500px;
}

<div>
  <form id="quadrato" method="POST">
    <input type="button" value="+" onclick="incrementa()">
    <input type="button" value="-" onclick="decrementa()">
    <br>
    <textarea id="inser" style="font-size: 14px">Content</textarea>
    <br>
    <input type="button" name="salva" value="salva">
    <!--button o submit? -->
  </form>
</div>

answered Nov 06 '19 at 16:23

KevBot

17,900
5
50
68

Right, but this way you have to put your style inline in the html code... – David Nov 06 '19 at 16:25
@David, that is true, but `window.getComputedStyle` causes a reflow which is expensive. A better solution to your answer would be to check the computed style only if it doesn't exist inline at the moment (then it should only be checked once) Here are some things that cause reflow: https://gist.github.com/paulirish/5d52fb081b3570c81e3a – KevBot Nov 06 '19 at 16:30
Yes, i'm totally agree with you. In fact the i think this is not the better solution to incrase/decrase font size in terms of UX. – David Nov 06 '19 at 16:34
@David, I'm confused, if we're talking about the user's experience (UX), then your solution is not the most performant and will cause bottlenecks thereby degrading the UX. If we're talking developer experience then, of course, your solution is "simpler". – KevBot Nov 06 '19 at 16:37
My solution should be take as a starting point and need to improve in performant terms for sure. – David Nov 06 '19 at 16:40
By the way @KevBot, your link is really interesting. Bookmarked. Thanks! – David Nov 06 '19 at 16:43

Mischa · Answer 3 · 2019-11-06T16:38:27.837

Take a look here to learn how to get the font-size of an element. I basically just changed modifArea.stlye.fontSize to window.getComputedStyle(modifArea).getPropertyValue('font-size'):

function incrementa() {
  var modifArea = document.getElementById("inser"); 
  var valTestoNum =  window.getComputedStyle(modifArea, null).getPropertyValue('font-size') 
  modifArea.style.fontSize = parseInt(valTestoNum) + 2 + "px"; 
  console.log(modifArea.style.fontSize);
}
function decrementa(){
  var modifArea = document.getElementById("inser");
  var valTestoNum =  window.getComputedStyle(modifArea, null).getPropertyValue('font-size') 
  modifArea.style.fontSize = parseInt(valTestoNum) - 2 + "px"; 
  console.log(modifArea.style.fontSize);
}

#quadrato{
  text-align: center; /*centrare il form*/
}
#inser{
  font-family: Arial;
  height: 500px;
  width: 500px;
  font-size: 14px;
}

<div>
 <form id="quadrato" method="POST">
   <input type="button" value="+" onclick="incrementa()"> 
   <input type="button" value="-" onclick="decrementa()">
   <br>
   <textarea id="inser"></textarea>
   <br>
   <input type="button" name="salva" value="salva"> <!--button o submit? -->
 </form>
</div>

Please explain what you've changed (and why). – Andreas Nov 06 '19 at 16:28 — Andreas, Nov 06 '19 at 16:28

how to increase fontSize with a button?

3 Answers3