Disable font resizing after 2 clicks-CodePudding

I want the font resizer button to be disabled after two clicks for increasing and decreasing font.

As of now, the text size keeps increasing and decreasing and i want it to stopped after two clicks on both increase and decrease button.

(function($) {
  var jQueryaffectedElements = jQuery("body, p, h1, h2, h3, h4, h5, h6, div, a, span, html, ul, li, ol, audio, br, hr, form, section, font, head, header, i, input, img, label, table,ul.footer-list li a");

  jQueryaffectedElements.each(function() {
    var jQuerythis = jQuery(this);
    jQuerythis.data("orig-size", jQuerythis.css("font-size"));
  });

  jQuery("#btn-increase_wp_font_rp").click(function() {

    changeFontSize(2);
  })

  jQuery("#btn-decrease_wp_font_rp").click(function() {
    changeFontSize(-2);
  })

  jQuery("#btn-orig_wp_font_rp").click(function() {
    jQueryaffectedElements.each(function() {
      var jQuerythis = jQuery(this);
      jQuerythis.css("font-size", jQuerythis.data("orig-size"));
    });
  })

  function changeFontSize(direction) {
    jQueryaffectedElements.each(function() {
      var jQuerythis = jQuery(this);

      jQuerythis.css("font-size", parseInt(jQuerythis.css("font-size"))   direction);

    });

  }

})(jQuery);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>Click to increase and decrease fontsizes</h1>
<button id="btn-decrease_wp_font_rp">Decrease</button>
<button id="btn-orig_wp_font_rp">Reset</button>
<button id="btn-increase_wp_font_rp">Increase</button>

CodePudding user response：

That is very trivial

Just add a counter and increase/decrease that

(function($) {
  var jQueryaffectedElements = jQuery("body, p, h1, h2, h3, h4, h5, h6, div, a, span, html, ul, li, ol, audio, br, hr, form, section, font, head, header, i, input, img, label, table,ul.footer-list li a");

  count = 0;

  jQueryaffectedElements.each(function() {
    var jQuerythis = jQuery(this);
    jQuerythis.data("orig-size", jQuerythis.css("font-size"));
  });

  jQuery("#btn-increase_wp_font_rp").click(function() {
    if (count >= 2) return;
    changeFontSize(2);
    count  ;
  })

  jQuery("#btn-decrease_wp_font_rp").click(function() {
    if (count <= -2) return;
    changeFontSize(-2);
    count--;
  })
  jQuery("#btn-orig_wp_font_rp").click(function() {
    count = 0;
    jQueryaffectedElements.each(function() {
      var jQuerythis = jQuery(this);
      jQuerythis.css("font-size", jQuerythis.data("orig-size"));
    });
  })

  function changeFontSize(direction) {
    jQueryaffectedElements.each(function() {
      var jQuerythis = jQuery(this);
      jQuerythis.css("font-size", parseInt(jQuerythis.css("font-size"))   direction);
    });
  }
})(jQuery);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>Click to increase and decrease fontsizes</h1>
<button id="btn-decrease_wp_font_rp">Decrease</button>
<button id="btn-orig_wp_font_rp">Reset</button>
<button id="btn-increase_wp_font_rp">Increase</button>