HTML 文本输入 * “值”;以不同的文本输入显示

HTML Text Input * "value"; display in different text input

本文关键字：输入 文本 显示 HTML      更新时间：2023-09-26

我一直在寻找这个问题的答案，但找不到。我正在尝试在类型为"文本"的 html 输入标签中输入一个数字。然后，我需要将该值放入该输入中乘以 2，并将答案显示在另一个输入中。

我的桌子看起来像这样。然后重复多次并使用相应的表标记关闭。

<table class="left-table" style="width:50%">
        <th><u>Expense</u></th>
        <th><u>Weekly</u></th>
        <th><u>Fortnightly</u></th>
        <th><u>Yearly</u></th>
        <tr>
            <td class="options">
                <select class="expense-option">
                    <option>- Select Option -</option>
                    <option>Car Insurance</option>
                    <option>Car Loan</option>
                    <option>Car Park</option>
                    <option>Car Registration</option>
                    <option>Car Servicing</option>
                    <option>Clothes</option>
                    <option>Credit Card</option>
                    <option>Dining Out</option>
                    <option>Donation</option>
                    <option>Entertainment</option>
                    <option>Groceries</option>
                    <option>Health Insurance</option>
                    <option>Internet</option>
                    <option>Mobile Phone</option>
                    <option>Petrol</option>
                    <option>Rent / Mortgage</option>
                    <option>Spending / Pocket Money</option>
                    <option>Sport</option>
                    <option>Utilities</option>
                </select>
            </td>
            <td><input class="amount" id="input10" type="text" placeholder="Weekly $"></td>
            <td><input class="amount" id="output10" type="text" placeholder="Fortnightly $" readonly></td>
            <td><input class="amount" id="output20" type="text" placeholder="Yearly $" readonly></td>  
        </tr>

我的JS是这样的：

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$("#input10").keyup(function(){
 var input1 = parseInt($("#input10").val());
 if(!isNaN(input1)){
     $("#output10").val(input1 * 2);
 }
 else{
     $("#output10").val("");
     alert("Please enter a valid number");
 }
});
</script>

但仍然没有任何效果。

$("#input1").keyup(function(){
 var input1 = parseInt($("#input1").val());
 if(!isNaN(input1)){
     $("#output1").val(input1 * '2');
 }
 else{
     $("#output1").val("");
     alert("Please enter a valid number");
 }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
		<table>
			<tr>
				<td><input class="amount" id="input1" type="text" placeholder="Weekly $"></td>
				<td><input class="amount" id="output1" type="text" placeholder="Fortnightly $" readonly></td>
			</tr>
		</table>

$("#input1").keyup(function(){
 var input1 = parseInt($("#input1").val());
 if(!isNaN(input1)){
     $("#output1").val(input1 * '2');
 }
 else{
     $("#output1").val("");
     alert("Please enter a valid number");
 }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
			<tr>
				<td><input class="amount" id="input1" type="text" placeholder="Weekly $"></td>
				<td><input class="amount" id="output1" type="text" placeholder="Fortnightly $" readonly></td>
			</tr>
		</table>

您在第一行中有一个拼写错误（也假设您有一个这样的表格结构：

<td><input class="amount" id="input1" type="text" placeholder="Weekly $"></td>
<td><input class="amount" id="output1" type="text" placeholder="Fortnightly $" readonly></td>

删除行中 2 周围的 ' 字符：

$("#output1").val(input1 * '2');

这使它成为一个字符串您需要（为了保持可用于计算的数字：

$("#output1").val(input1 * 2);

更正后的工作代码是（添加了表结构）：

    <table>
        <tr>
            <td><input class="amount" id="input1" type="text" placeholder="Weekly $"></td>
            <td><input class="amount" id="output1" type="text" placeholder="Fortnightly $" readonly></td>
        </tr>
    </table>

<script>
$("#input1").keyup(function(){
 var input1 = parseInt($("#input1").val());
 if(!isNaN(input1)){
     $("#output1").val(input1 * 2);
 }
 else{
     $("#output1").val("");
     alert("Please enter a valid number");
 }
});
</script>

在这里，您已将字符串解析为 int

var input1 = parseInt($("#input1").val());

但是在附加值时，您正在尝试与字符串 2 进行乘数，因为它包含在 '' 中。所以这个的解决方案非常简单，你需要用整数值 .ie 进行多重运算。仅 2 个。

var result = input1 * 2 ;
$("#output1").val(result);
相关文章：