如何使用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;
}

Demo here

---

更新（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);
    });
});

<强> See demo here

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

Answer 2

使用jQuery简单：

<input type="text" name="t1" id="t1" value="" onkeypress="calculation()" />

<input type="text" name="converted" id="converted" value="" />

<script>
function calculation() {
   var price = 'here is your formula';
   $('#converted').val(price);
}
</script>