使用javascript显示其他输入到另一个元素的总和

Question

问题

如何让元素动态显示各种输入的总和？

背景

我有几个文本框（具有相同的类）。我有4个输入，每个输入有一个数字。输入1为“1”，2为“2”等。

我希望第五个框包含“1,2,3,4”的总和。

问题

我正在努力使用javascript。

• 理想情况下，id final的第四个框会随着任何前一个框的编辑而更新。
• 我可以使用课程吗？这是我的意图，因为输入量可能会有所不同，但并不总是四。

HTML

<input type='text' id='txtFirst' class='copyText' /><br/>
<input type='text' id='txtSecond' class='copyText' /><br/>
<input type='text' id='txtThird' class='copyText' /><br/>
<input type='text' id='final' />

Answer 1

$('.copyText').on('keyup', function(){
    var val = 0;
    $('.copyText').each(function(){
        val  = val + (+$(this).val());
    })
    $('#final').val(val);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<input type='text' id='txtFirst' class='copyText' /><br/>
<input type='text' id='txtSecond' class='copyText' /><br/>
<input type='text' id='txtThird' class='copyText' /><br/>
<input type='text' id='final' />

尝试使用jQuery（使用2.1.0演示）

$('.copyText').on('keyup', function(){
    var val = 0;
    $('.copyText').each(function(){
        val  = val + (+$(this).val());
    })
    $('#final').val(val);
})

查看工作演示click here。或者在这里运行代码片段。

Answer 2

使用jQuery获取字段值：

$('.copyText').map(function(){return $(this).val();})

转换为字符串：

.get().join(',')

并将其分配给#final：

$("#final").val();

结论：

$("#final").val($('.copyText').map(function(){return $(this).val();}).get().join(','));

Answer 3

 window.onload = _ => {
    //get the html elements
    const texts = Array.from(document.getElementsByClassName("copyText"));
    const out = document.getElementById("final");

    //a function for getting all the text values and updating the ouput
    function update(){
        out.value = texts.map( text => text.value ).join(", ");
    }

    //await input, then update
    texts.forEach( text => text.addEventListener("input", update) );
};