时间戳

首页 > 解决方案 > 根据逗号分隔的输入中的数字进行求和运算

jquery - 根据逗号分隔的输入中的数字进行求和运算

问题描述

这仅用于学习目的。

我在表单中有一个输入字段，我想对输入中的所有用逗号分隔的数字求和，并在另一个输入中显示结果，其中 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>

标签： jqueryhtml

解决方案

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

在这里，我使用 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="" />

推荐阅读