根据输入内用逗号分隔的数字进行求和运算

Question

这只是出于学习目的。

我有一个表单的输入域，我想总结所有以逗号这是里面输入分隔号，并显示与ID 总在与第一 ID输入变化另一个里面输入的结果。

现在我有了它，它只在按下按钮时才执行特定数字的总和。

 var numbers = [65, 44, 12, 4]; function getSum(total, num) { return total + num; } function myFunction(item) { document.getElementById("demo").innerHTML = numbers.reduce(getSum); } 

 <input value='1,3,5,6' id='first'> <span id="demo"></span> <button onclick="myFunction()">Try it</button> 

Answer 1

我试图找到原始问题的副本，该问题没有当前的脚本，但没有成功。 现在代码已发布，所缺少的只是拆分。

在这里，我使用split，reduce并额外触发输入onload以在添加更多值之前计算现有值

 $(function() { $("#first").on("input",function() { let val = this.value.split(",").reduce((a, b) => +a + +b, 0); // convert to number and add $("#res").val(val); }).trigger("input") }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input value='1,3,5,6' id='first'> => <input id="res" value="" /> 

普通JS：

 function sumIt() { var fld = document.getElementById("first"); var val = fld.value.split(",").reduce((a, b) => +a + +b, 0); // convert to number and add document.getElementById("res").value = val; } window.addEventListener("load", function() { document.getElementById("first").addEventListener("input", sumIt); sumIt(); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input value='1,3,5,6' id='first'> => <input id="res" value="" /> 

Answer 2

将value string Split为array然后用reduce它们

 console.log($('#first').val().split(',').reduce((e,i)=>Number(e)+Number(i))) 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input value='1,3,5,6' id='first'>