每次按下多个输入元素上的每个键，比较它们的值

Question

所以我在HTML 中有3个输入框

<input type="number" id="geoOnePercentage" placeholder="Geo 1 Percentage" />
<input type="number" id="geoTwoPercentage" placeholder="Geo 2 Percentage" />
<input type="number" id="geoThreePercentage" placeholder="Geo 3 Percentage" />

我想做的是，当用户在这些输入框中输入时，不断检查他们的总数是否超过100，一旦用户输入的值使总数超过100，就重置表单。

例如，用户在第一个输入框中键入了50，这没关系。然后用户在下一个输入框中键入40，也可以，但是，如果用户键入一个值，如15，使所有输入框的值总和超过，则重置所有3个输入框的数值。

然而，我不知道该怎么做。我已经了解了一些关于JavaScript中onkeydown事件的内容，但它并没有像我预期的那样工作。

如果有人能阐明如何做到这一点，我将不胜感激

Answer 1

let inputs = [...document.querySelectorAll('input[type="number"]')];
inputs.forEach(inp => inp.addEventListener('input', function() {
const total = inputs.reduce((acc, inp) => acc + Number(inp.value), 0);
if (total > 100) {
inputs.forEach(inp => inp.value = '');
}
}))

<input type="number" id="geoOnePercentage" placeholder="Geo 1 Percentage" />
<input type="number" id="geoTwoPercentage" placeholder="Geo 2 Percentage" />
<input type="number" id="geoThreePercentage" placeholder="Geo 3 Percentage" />