A jquery function to decrease font size each time a button is pressed

Question

Please help.

function fontDown() {
  var curSize = parseInt($('.box').css('font-size'));
  curSize--;
  $('.box').css('font-size', curSize + "pt").css('line-height', curSize + "pt");
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button onclick="fontDown()">button</button>
    
<div class="box" style="font-size: 14pt; line-height: 14pt;">sometext</div>

I expect the font-size to decrease each time I press the button. But, it only increases. Not only that but the font size increases by about 5 or 7 points each time the button is pressed.

Answer 1

use this: it easy

operators +=, *=, -=, /= should be used in jquery

function fontDown() {
  $('.box')
    .css('font-size', '-=1pt')
    .css('line-height', '-=1pt');
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button onclick="fontDown()">button</button>
    
<div class="box" style="font-size: 14pt; line-height: 14pt;">sometext</div>