检查字段总和是否大于100？

Question

What I try to achieve to give alert if the sum of first values are greater than 100 if not third value has to be calculated like this; 3th textbox= 100- 1st textbox- 2th textbox

It works well at the beginning. When I type 100 for 1st textbox then 20 for 2nd I get error then I enter 80-30 I get again alert but then third times when I enter 50-30 I again get error but actually it shouldnt give error it should write in third textbox 20

$(document).ready(function() {
    // calc
    jQuery("#custom-419").on("change", function() {
        var vorOrt = $(this).val();
        jQuery("#custom-420").on("change", function() {
            var vorOrt2 = $(this).val();
            var sum = 0;
            sum += parseInt(vorOrt);
            sum += parseInt(vorOrt2);
            console.log($('#sum').val());
            if (sum <= 100) {
                var onWeb = 100 - vorOrt;
                onWeb = onWeb - vorOrt2;
                jQuery("#421").val(onWeb);
            } else {
                window.alert("The sum of values can not be more than 100!");
                $('#custom-419').val("");
                $('#custom-420').val("");
                $('#custom-421').val("");
            }
        });
    })
});

Answer 1

Because all the other answers contains jQuery, I though it may be helpful to provide a vanilla JavaScript solution. Keep in mind that solution is for modern browser only!

 function calc() { const counters = [...document.querySelectorAll('.counter')]; const total = document.querySelector('.total'); const sum = counters.reduce((a, b) => a += parseInt(b.value) || 0, 0); total.value = sum; if (sum <= 100) return; alert("The sum of values can not be more than 100!"); counters.forEach(x => x.value = ''); total.value = ''; } [].forEach.call(document.querySelectorAll('.counter'), x => x.addEventListener('keyup', calc)); 

 <div> result has to be less then or equal 100 </div> <input class="counter" id="#custom-419" /> + <input class="counter" id="#custom-420" /> = <input class="total" id="#custom-421" disabled /> 

Explanation

Because you didn't show us your current html, I made it simple. So no explanation required I guess.

What happens in that JS solution is pretty straight forward.

In the last line both input with the call counter are getting an EventListener to fire on keyup . You may keep the change event instead...

In the calc function all values of the counters get parsed to int and aggregated to sum . The rest of the code is nothing special.

---

As the above solution is for modern browsers only (ES6+), here are two more for older browsers:

IE11+ Support ( Demo )

function calc() {
  const counters = document.querySelectorAll('.counter');
  const total = document.querySelector('.total');
  const sum = Array.prototype.reduce.call(counters, function(a, b) {
    return a += parseInt(b.value) || 0;
  }, 0);

  total.value = sum;

  if (sum <= 100) return;

  alert("The sum of values can not be more than 100!");
  Array.prototype.forEach.call(counters, function(x) {
    x.value = '';
  });
  total.value = '';
}

Array.prototype.forEach.call(document.querySelectorAll('.counter'), function(x) {
    x.addEventListener('keyup', calc);
});

IE9+ Support ( Demo )

I made two more function for this example to make it a bit more readable.

function calc() {
  var counters = document.querySelectorAll('.counter');
  var total = document.querySelector('.total');
  var sum = getSum(counters);

  total.value = sum;

  if (sum <= 100) return;

  alert("The sum of values can not be more than 100!");
  clearCounters(counters);
  total.value = '';
}

function getSum(counters) {
    var result = 0;

    for(var i = 0; i < counters.length; i++) {
        result += parseInt(counters[i].value) || 0;
    }

    return result;
}

function clearCounters(counters) {
    for(var i = 0; i < counters.length; i++) {
        counters[i].value = '';
    }
}

var _counters = document.querySelectorAll('.counter');
for(var i = 0; i < _counters.length; i++) {
    _counters[i].addEventListener('keyup', calc);
}

Answer 2

Why nesting the 2 event functions ?

Try this :

 var vorOrt = 0; var vorOrt2 = 0; $(document).ready(function() { $('#custom-419').on('change', function() { vorOrt = $(this).val(); checkInputs(); }); $('#custom-420').on('change', function() { vorOrt2 = $(this).val(); checkInputs(); }); }); function checkInputs() { var sum = 0; sum += parseInt(vorOrt, 10); sum += parseInt(vorOrt2, 10); if (sum <= 100) { var onWeb = 100 - vorOrt - vorOrt2; $("#custom-421").val(onWeb); } else { window.alert('The sum of values can not be more than 100!'); $('#custom-419').val(''); $('#custom-420').val(''); $('#custom-421').val(''); } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input class="counter" id="custom-419" type="number" /> <input class="counter" id="custom-420" type="number" /> <input class="total" id="custom-421" type="number" /> 

Answer 3

Look at the following solution. It uses jQuery's each .

1. What I did is attach the same function to every input by using a descriptive class name: counter . We can easily get all the input using the selector input.counter and add an onchange event with only one line of code.

2. After that the generic function testIfMoreThanHundred will iterate over all the element using each and sum the values into a variable.

3. after that it's just a simple if check to see if the value if more than a hundred.

 $(document).ready(function() { // calc $("input.counter").on("change", testIfMoreThanHundred); }); //let's make a generic function shall we: function testIfMoreThanHundred() { var sum = 0; //get the elements and use each to iterate over them $("input.counter").each(function() { var number = parseInt($(this).val(), 10); //test if value is a number, if not use 0 if (!isNaN(number)) { sum += parseInt($(this).val(), 10); } else { sum += 0; } }); if (sum > 100) { alert("The sum can't be greater than a 100"); $("input.counter").val(""); //empty the values $("input.total").val(""); } else { $("input.total").val(100 - sum); //show value in third box } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input class="counter" id="custom-419" type="number" /> <input class="counter" id="custom-420" type="number" /> <input class="total" id="custom-421" type="number" /> 

Answer 4

Once change function is inside the other, which is not necessary, Also reset the value of sum when alert is thrown

 $(document).ready(function() { var sum = 0; // initializing sum function calSum(val) { sum += val; // will add the values console.log(sum) if (sum <= 100) { var onWeb = 100 - sum; $("#custom-421").val(onWeb); } else { alert("The sum of values can not be more than 100!"); $('#custom-419').val(""); $('#custom-420').val(""); $('#custom-421').val(""); sum = 0; } } $("#custom-419").on("change", function() { calSum(parseInt($(this).val(), 10)); }); $("#custom-420").on("change", function() { calSum(parseInt($(this).val(), 10)); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="text" id="custom-419"> <input type="text" id="custom-420"> <input type="text" id="custom-421">