当前位置：文江博客话题详情

使用javascript自动计算输入值的总和

发布于 2024-09-07 12:04:54 字数 120 浏览 2 评论 0原文

我有一个 html 页面，其中有许多动态创建的输入框。文本框的数量每次都不同。我想计算用户输入的数字的总和，并显示它。当用户删除一个数字时，应自动计算总和。

我怎样才能用javascript做到这一点？谢谢

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

甜味拾荒者 2024-09-14 12:04:54

在 jQuery 中，类似这样的事情应该在一些假设下工作：

$('.toAdd').live('change', function() {
  var total = 0;

  $('.toAdd').each(function () {
    total += $(this).val();
  });

  $('#total').val(total);
});

假设您的输入字段都具有“toAdd”类，并且最终输入字段的 ID 为“total”。

纯JS中：

var elems = document.getElementsByClassName('toAdd');

var myLength = elems.length,
total = 0;

for (var i = 0; i < myLength; ++i) {
  total += elems[i].value;
}

document.getElementById('total').value = total;

In jQuery something like this should work with a few assumptions:

$('.toAdd').live('change', function() {
  var total = 0;

  $('.toAdd').each(function () {
    total += $(this).val();
  });

  $('#total').val(total);
});

The assumptions being that your input fields all have the class 'toAdd' and that your final input field has an ID of 'total'.

In pure JS:

var elems = document.getElementsByClassName('toAdd');

var myLength = elems.length,
total = 0;

for (var i = 0; i < myLength; ++i) {
  total += elems[i].value;
}

document.getElementById('total').value = total;

回复收藏 0 原文

习惯成性 2024-09-14 12:04:54

让我在回顾我的笔记时详细说明，但这是一个我相信会起作用的高级答案...（我的Java脚本非常生疏）...

使输入框共享一个属性（或使用标签），这样你就可以得到无论大小如何都要遍历的集合...然后在每个输入的 onkeyup 事件上调用此函数来对总数进行求和。将结果放入另一个带有您事先知道的 ID 的条目中...

您必须验证输入，因为如果其中一个不是数字，那么总数也将是“NAN”

好吧，这是一个完整的工作示例，您可以构建它我刚刚把其中的一些放在一起：显然你需要大量的打磨......

<html>
<head>
<script language="javascript">
function AddInputs()
{
    var total = 0;
    var coll = document.getElementsByTagName("input")
    for ( var i = 0; i<coll.length; i++)
    {
        var ele = coll[i];
        total += parseInt(ele.value);
    }
    var Display = document.getElementById("Display");
    Display.innerHTML = total;
}
</script>
</head>
<body>
<input onkeyup="AddInputs()" />
<input onkeyup="AddInputs()" />
<input onkeyup="AddInputs()" />
<span id="Display"></span>
</body>
</html>

Let me elaborate when I review my notes but here is a high level answer that I believe will work... (My Java Script is very rusty)...

Make the input boxes share an attribute (or use tag) so you can get a collection to walk through no matter the size... Then on the onkeyup event on every input call this function that will sum the totals. Put the result into another entry with the ID you know beforehand...

You will have to validate input because if one of them is not a number then the total will also be "NAN"

Okay here is a complete working example you can build off of that I just threw together: It obviously needs a great deal of polishing on your end...

<html>
<head>
<script language="javascript">
function AddInputs()
{
    var total = 0;
    var coll = document.getElementsByTagName("input")
    for ( var i = 0; i<coll.length; i++)
    {
        var ele = coll[i];
        total += parseInt(ele.value);
    }
    var Display = document.getElementById("Display");
    Display.innerHTML = total;
}
</script>
</head>
<body>
<input onkeyup="AddInputs()" />
<input onkeyup="AddInputs()" />
<input onkeyup="AddInputs()" />
<span id="Display"></span>
</body>
</html>

回复收藏 0 原文

~没有更多了~