How to number increment with limit-CodePudding

I am using number field with plus and minus for product quantity select for a project. I need to set a max limit when I press plus icon. I am using below code

$(document).ready(function() {
    $('.minus').click(function () {
        var $input = $(this).parent().find('input');
        var count = parseInt($input.val()) - 1;
        count = count < 1 ? 1 : count;
        $input.val(count);
        $input.change();
        return false;
    });
    $('.plus').click(function () {
        var $input = $(this).parent().find('input');
        $input.val(parseInt($input.val())   1 );
        $input.change();
       
        return false;
    });
});

How to set a maximum limit for when i press icon.

CodePudding user response：

Optimize for readability by using Math.min() and Math.max()

const MINIMUM = 1
const MAXIMUM = 99

$(document).ready(function() {
        $('.minus').click(function () {
            var $input = $(this).parent().find('input');
            var newCount = Math.max(parseInt($input.val()) - 1, MINIMUM);
            $input.val(newCount);
            $input.change();
            return false;
        });
        $('.plus').click(function () {
            var $input = $(this).parent().find('input');
            var newCount = Math.min(parseInt($input.val())   1, MAXIMUM)
            $input.val(newCount);
            $input.change();
            return false;
        });
    });

CodePudding user response：

Here's how you'd limit it to 99 for example :

$(document).ready(function() {
    $('.minus').click(function () {
        var $input = $(this).parent().find('input');
        var count = parseInt($input.val()) - 1;
        count = count < 1 ? 1 : count;
        $input.val(count);
        $input.change();
        return false;
    });
    $('.plus').click(function () {
         var $input = $(this).parent().find('input');
        var count = parseInt($input.val())   1;
        count = count > 99 ? 99 : count;
        $input.val(count);
        $input.change();
        return false;
    });
});

CodePudding user response：

You need to check the current value. If the value exceeds the limit, ignore the action:

$(document).ready(function() {
        $('.minus').click(function () {
            var $input = $(this).parent().find('input');
            var count = parseInt($input.val()) - 1;
            count = count < 1 ? 1 : count;
            $input.val(count);
            $input.change();
            return false;
        });
        $('.plus').click(function () {
            var $input = $(this).parent().find('input');

            if ($input.val() > 100) {
                return;
            }

            $input.val(parseInt($input.val())   1 );
            $input.change();
           
            return false;
        });
    });

CodePudding user response：

The static function Math.min() returns the lowest-valued number passed into it, or NaN if any parameter isn't a number and can't be converted into one.

$(document).ready(function() {
        $('.minus').click(function () {
            var $input = $(this).parent().find('input');
            var count = parseInt($input.val()) - 1;
            count = count < 1 ? 1 : count;
            $input.val(count);
            $input.change();
            return false;
        });
        $('.plus').click(function () {
            var max = 100;
            var $input = $(this).parent().find('input');
            $input.val(Math.min(max, parseInt($input.val())   1 ));
            $input.change();
           
            return false;
        });
    });