javascript - 检查字段之和是否大于100？

Question

如果第一个值的总和大于 100(如果不是第三个值必须像这样计算的话)，我试图达到的目的是发出警报；第三个文本框= 100-第一个文本框-第二个文本框

一开始效果很好。当我为第一个文本框输入 100 然后为第二个输入 20 我得到错误然后我输入 80-30 我再次收到警报但是第三次​​当我输入 50-30 我再次得到错误但实际上它不应该给出错误它应该写在第三个文本框中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

因为所有其他答案都包含 jQuery，所以我认为提供普通 JavaScript 解决方案可能会有所帮助。 请记住，该解决方案仅适用于现代浏览器!

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 />

解释

因为您没有向我们展示您当前的 html，所以我简化了它。所以我想不需要解释。

在该 JS 解决方案中发生的事情非常简单。

在最后一行中，调用 counter 的两个输入都得到一个 EventListener 在 keyup 上触发. 您可以改为保留 change 事件...

在 calc 函数中，计数器的所有值都被解析为 int 并聚合为 sum。其余代码没有什么特别之处。

---

由于上述解决方案仅适用于现代浏览器(ES6+)，这里还有两个适用于旧浏览器的解决方案:

IE11+ 支持 ( 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+ 支持 ( Demo )

我为这个示例添加了两个函数，以使其更具可读性。

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);
}