I add the max value of three input numbers and it's worked but how to add the increment decrement button without losing the max value?

Question

I need the addition of a three-element is 8, with click + and - button. But, I don't want that it will increase each element up to 8.

 // Addtion of select items LINK - https://stackoverflow.com/questions/49644837/set-max-value-of-three-input-numbers-together var max = 8; var $inputs = $('input'); function sumInputs($inputs) { var sum = 0; $inputs.each(function() { sum += parseInt($(this).val(), 0); }); return sum; } $inputs.on('input', function(e) { var $this = $(this); var sum = sumInputs($inputs.not(function(i, el) { return el === e.target; })); var value = parseInt($this.val(), 10) || 0; if (sum + value > max) $this.val(max - sum); }); //Increment Decrement value function up(max) { document.getElementById("myNumber").value = parseInt(document.getElementById("myNumber").value) + 1; if (document.getElementById("myNumber").value >= parseInt(max)) { document.getElementById("myNumber").value = max; } } function down(min) { document.getElementById("myNumber").value = parseInt(document.getElementById("myNumber").value) - 1; if (document.getElementById("myNumber").value <= parseInt(min)) { document.getElementById("myNumber").value = min; } } function up2(max) { document.getElementById("myNumber2").value = parseInt(document.getElementById("myNumber2").value) + 1; if (document.getElementById("myNumber2").value >= parseInt(max)) { document.getElementById("myNumber2").value = max; } } function down2(min) { document.getElementById("myNumber2").value = parseInt(document.getElementById("myNumber2").value) - 1; if (document.getElementById("myNumber2").value <= parseInt(min)) { document.getElementById("myNumber2").value = min; } } function up3(max) { document.getElementById("myNumber3").value = parseInt(document.getElementById("myNumber3").value) + 1; if (document.getElementById("myNumber3").value >= parseInt(max)) { document.getElementById("myNumber3").value = max; } } function down3(min) { document.getElementById("myNumber3").value = parseInt(document.getElementById("myNumber3").value) - 1; if (document.getElementById("myNumber3").value <= parseInt(min)) { document.getElementById("myNumber3").value = min; } }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <div class="select-1"> <button type="submit" value="-" onclick=" down('0')" class="sub" id="">-</button> <input type="number" id="myNumber" value="0" name="qty" max="8" min="0" step="1"/> <button type="submit" value="+" onclick="up('8')" class="add">+</button> </div> <div class="select-2"> <button type="submit" value="-" onclick=" down2('0')" class="sub">-</button> <input type="number" id="myNumber2" value="0" name="qty2" max="8" min="0" step="1"/> <button type="submit" value="+" onclick="up2('8')" class="add">+</button> </div> <div class="select-3"> <button type="submit" value="-" onclick=" down3('0')" class="sub" id="">-</button> <input type="number" id="myNumber3" value="0" name="qty3" max="8" min="0" step="1"/> <button type="submit" value="+" onclick="up3('8')" class="add">+</button> </div>

Currently, the max value is 8. I would like to get the max value with the + and - button as well.

How can I solve this with javascript or jquery?

Here, there is a link below I follow for increment and decrement. https://stackoverflow.com/a/49645518/15412266

Answer 1

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <div>
        

        <button type="submit" value="+" onclick="minusoperation(1)" class="minus">-</button>
        <input type="number" class="numbers" id="number1" min="0" max="8" onchange="inputNumber(this)" data-prevvalue=0 />
        <button type="submit" value="+" onclick="plusoperation(1)" class="plus">+</button>

        <button type="submit" value="+" onclick="minusoperation(2)" class="minus">-</button>
        <input type="number" class="numbers" id="number2" min="0" max="8" onchange="inputNumber(this)" data-prevvalue=0 />
        <button type="submit" value="+" onclick="plusoperation(2)" class="plus">+</button>


        <button type="submit" value="+" onclick="minusoperation(3)" class="minus">-</button>
        <input type="number" class="numbers" id="number3" min="0" max="8" onchange="inputNumber(this)" data-prevvalue=0 />
        <button type="submit" value="+" onclick="plusoperation(3)" class="plus">+</button>


    </div>

    <script type="text/javascript">
        function inputNumber(el)
        {
            
            var myElements = document.getElementsByClassName('numbers');
            var sum = 0;
            for (var i=0;i<myElements.length;i++) {
                if(myElements[i].value)
                    sum = sum+parseInt(myElements[i].value);
            }
            if(sum<=8)
            {
                el.dataset.prevvalue  = el.value;
            } else {
                el.value  = el.dataset.prevvalue;
            }

        }

        function minusoperation(inputNumber)
        {

            var el = document.getElementById('number'+inputNumber);
            if(parseInt(el.value))
            {
                el.value = parseInt(el.value)-1;

            } else {
                el.value = 0;
            }
            el.onchange();
        }

        function plusoperation(inputNumber)
        {
            var el = document.getElementById('number'+inputNumber);

            if(parseInt(el.value))
            {
                el.value = parseInt(el.value)+1;
            } else {
                el.value = 1;
            }
            el.onchange();

        }

    </script>
</body>
</html>

I add the max value of three input numbers and it's worked but how to add the increment decrement button without losing the max value?

Question

1 answers

solution1
1 ACCPTED 2021-03-17 07:43:22

I add the max value of three input numbers and it's worked but how to add the increment decrement button without losing the max value?

Question

1 answers

solution1 1 ACCPTED 2021-03-17 07:43:22

solution1
1 ACCPTED 2021-03-17 07:43:22