如何使用JavaScript更新按键上的文本框

Question

有没有办法在每次按键时更新文本框的值？

我正在进行货币兑换.因此,有两个文本框,一个用于用户输入值,另一个将在每次按键时自动显示转换后的金额.

我应该使用for循环吗？但我应该循环什么？

以下for循环中的文本框应该能够进行单独的行转换

<% for(int i=0; i<2; i++) { %>
 <td><input type="text" id= "amount" name="amount<%=i%>" /></td>

 <td><input type="text" id= "convertedAmount" name="convertedAmount<%=i%>" readonly/></td>
<%}%>

我该如何开始尝试这项任务？

在此先感谢任何可能的帮助.

Answer 1

onkeyup 最适合您的任务:

Type amount $: <input type='text' id='amount' onkeyup="updateConverted()" >
<br>
Converted: <input type='text' id='converted' >

JavaScript函数:

function updateConverted() {
    var conversionRate = 1.5;
    document.getElementById('converted').value =
                       document.getElementById('amount').value * conversionRate;
}

在这里演示.

更新(JSP for循环):

对于for循环,您可以使用以下jQuery代码(无需更改HTML):

$('input[name=amount]').each(function (_, value) {
    $(value).keyup(function () {
        var rate = 1.5;
        var convAmount = $(this).val() * rate;
        $(this).parent().next().children('input[name=convertedAmount]').val(convAmount);
    });
});

在这里看演示.

_{注意:您的for循环正在生成重复的ID.如果可能,请避免使用HTML,因为它无效.}