Question

这只是出于学习目的。

我有一个表单中的输入字段，我想对所有用逗号分隔的数字求和，该数字在该输入内部，并在另一个输入中以id total 的形式显示结果，其中输入更改为id first 。

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

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

Split中的value string中的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'>

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

2 个答案: