Entonces tengo 3 cuadros de entrada en HTML
<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" />Lo que quiero hacer es que, a medida que el usuario escriba en estos cuadros de entrada, siga comprobando si su total supera el valor de 100, tan pronto como el usuario escriba un valor que haga que el total supere los 100, reinicie el formulario.
Por ejemplo, el usuario escribió 50 en el primer cuadro de entrada, está bien. Luego, el usuario escribió 40 en el siguiente cuadro de entrada, eso también está bien, PERO ENTONCES, si el usuario escribe un valor como 15 que hace que el total de los valores combinados de todos los cuadros de entrada superen, entonces restablezca los valores de los 3 cuadros de entrada .
Sin embargo, no tengo idea de cómo hacer esto. Aprendí un poco sobre el evento onkeydown en JavaScript, pero no funciona como esperaba.
Si alguien pudiera arrojar algo de luz sobre cómo se podría hacer esto, se lo agradecería mucho.
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" />