c'est mon code, je ne sais pas pourquoi le bouton + n'augmente pas. Tout me semble correct. J'ai créé une fonction appelée incrementa () qui devrait analyser la valeur de la taille de police réelle et augmenter la taille de la police de 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>
0
Tomoko 6 nov. 2019 à 19:17

2 réponses

Le problème auquel vous êtes confronté est que .style lit les styles en ligne sur un élément, pas les styles d'une feuille de style. Une solution simple consiste à définir le style sur l'élément en ligne: 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>
0
KevBot 6 nov. 2019 à 16:23

Vous pouvez utiliser la fonction getComputedStyle pour obtenir la valeur appliquée par la règle css:

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>
2
David 6 nov. 2019 à 16:26