同一页面上多个表单的简单可重用 javascript 平均函数

Question

不到 48 小时前，我真的开始尝试自学 javascript。除了想学习它之外，我还有一个我正在从事的小型个人项目，并使用我的工作学习作为示例。但是我遇到了一个问题，我敢肯定这是相当基本的，我只是因为缺乏很多 javascript 知识而受到阻碍。

基本上这只是一个平均问题。
将有 4 个输入字段，第 4 个输入字段四舍五入到前三个字段的最接近整数平均值。
这 4 个字段配置将在页面上多次使用。
我希望它“实时”工作，而不是使用计算按钮，所以我假设需要“onKeyup”。 （不需要任何形式的验证或提交或保存或任何东西）

我能够接近的唯一代码真的很丑陋、冗长且令人费解。我不禁想到有一种非常简单的方法可以做到这一点，只需将相同的功能应用于每个输入分组即可。如下所示，但可能会更长。

some text
<input id="a" type="number" /><br/>
<input id="b" type="number" /><br/>
<input id="c" type="number" /><br/>
<input id="final" value="0" disabled />

some text
<input id="a" type="number" /><br/>
<input id="b" type="number" /><br/>
<input id="c" type="number" /><br/>
<input id="final" value="0" disabled />

提前致谢。这是一个更大问题的一部分，但我试图将它剥离到它的本质，并看到它的工作并理解它对帮助我解决其他一些问题大有帮助。

Answer 1

首先要使用不同的标记，每个页面应该只有一个 id，所以使用类，它也可以更轻松地定位所有内容。此外，如果效果是使用最后一个输入作为显示，您可以使用 readonly 而不是 disabled

<p>some text</p>
<div class="group">
    <input class="a" type="number" /><br/>
    <input class="b" type="number" /><br/>
    <input class="c" type="number" /><br/>
    <input class="final" value="0" readonly />
</div>
<p>some text</p>
<div class="group">
    <input class="a" type="number" /><br/>
    <input class="b" type="number" /><br/>
    <input class="c" type="number" /><br/>
    <input class="final" value="0" readonly />
</div>​

这是一个在 jquery 中完成的示例

$(function() {
    $('.group input').on('click', function() {
        var count = parseInt($(this).val()) || 0;
        $(this).siblings(':not(.final)').each(function() {
            if ($(this).val()) count = count + parseInt($(this).val());
        });
        $(this).siblings('.final').eq(0).val(count);
    });
});

演示在这里：http://jsfiddle.net/4S4Vp/1/ ​

Answer 2

这对于你的水平应该是可以理解的。第二组输入将使用 calc(2) 命名为 a-2，依此类推。

<input id="a-1" type="number" onkeyup="calc(1)" value="0" /><br/>
<input id="b-1" type="number" onkeyup="calc(1)" value="0" /><br/>
<input id="c-1" type="number" onkeyup="calc(1)" value="0" /><br/>
<input id="final-1" value="0" disabled />

function calc( n ) {
    var a = document.getElementById("a-" + n ).value;
    var b = document.getElementById("b-" + n ).value;
    var c = document.getElementById("c-" + n ).value;
    document.getElementById("final-" + n ).value = Math.round((parseInt(a)+parseInt(b)+parseInt(c))/3);
}

Answer 3

这确实又快又脏，但如果你知道你有多少输入，这应该可以工作：

// these would instead be your textboxes
​var a = document.getElementById('a').value();
var b = document.getElementById('b').value();
var c = document.getElementById('c').value();

var avg = (a+b+b)/3;

document.getElementById('c').value() = avg;

这里有一个jsfiddle，所以你可以尝试一下这个想法，看看它是否能如你所愿。

Answer 4

使用jquery。

在 jsfiddle 上查看 live demo

some text
<div id="div1">
<input id="a" type="number" /><br/>
<input id="b" type="number" /><br/>
<input id="c" type="number" /><br/>
<input id="final" value="0" disabled />
</div>
some text
<div id="div2">
<input id="a" type="number" /><br/>
<input id="b" type="number" /><br/>
<input id="c" type="number" /><br/>
<input id="final" value="0" disabled />
</div>​

<script type="text/javascript">

$("#div1 input").bind('change keyup click',function(){
    var final = 0;
    $("#div1 input").not("#div1 #final").each(function(idx,el){
        final += (el.value) ? parseInt(el.value) : 0;
    });
    $("#div1 #final").val(final/3);
});
$("#div2 input").bind('change keyup click',function(){
    var final = 0;
    $("#div2 input").not("#div2 #final").each(function(idx,el){
        final += (el.value) ? parseInt(el.value) : 0;
    });
    $("#div2 #final").val(final/3);
});
​</script>

Answer 5

我希望将此标记为重复，但因为this answer 没有代码，请享受：

// find all inputs in the page and gather data trying to convert it to number
var data = [].map.call( document.querySelectorAll('input'), function (v) {
    if (typeof v.value * 1 === 'NaN') {
        return 'NaN';
    }
    return v.value * 1;         
});
// not all data will be valid, so we filter it
data = data.filter( function (v) {
   return !isNaN(v);
});
// and then calculate average
var avg = data.reduce( function (v, v1) {
    return v + v1;
}) / data.length;