Question

我有4 textboxes。我想将所有三个textboxes的计算显示在第4 textboxes页。

计算的逻辑将是。

假设

文字1 = 1

第2条 = 59

第3条 = 3

因此，在第4个文本框中，它将结果显示为

第4条 = 159.30

如何使用javascript

执行此操作

我的html如下

<input name="txtArea1" type="text" id="Text1" style="width: 20%;" />
-
<input name="txtArea2" type="text" id="Text2" style="width: 20%;" />
-
<input name="txtArea3" type="text" id="Text3" style="width: 20%;" />
<input name="txtGuntha" type="text" id="Text4" style="width: 80%;" />

Answer 1

试试这个：

$('#Text4').val(parseInt($('#Text1').val()) * 100 + parseInt($('#Text2').val()) + parseInt($('#Text3').val()) / 10);

＆＃13;

function doCalculation() {
    $('#Text4').val(parseInt($('#Text1').val()) * 100 + parseInt($('#Text2').val()) + parseInt($('#Text3').val()) / 10);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input name="txtArea1" type="text" id="Text1" style="width: 20%;" />
-
<input name="txtArea2" type="text" id="Text2" style="width: 20%;" />
-
<input name="txtArea3" type="text" id="Text3" style="width: 20%;" />
<input name="txtGuntha" type="text" id="Text4" style="width: 80%;" />
<br>
<button id="calculate" onclick="doCalculation();">Calculate</button>

＆＃13;

Answer 2

var val_1 = document.getElementById("Text1").value;
var val_2 = document.getElementById("Text2").value;
var val_3 = document.getElementById("Text3").value;

document.getElementById("Text4").value = val_1 + val_2 + "." +(Number(val_3)*10);

Answer 3

您可以将此代码放在</body>标记之前。您还可以检查用户输入是否为数字，但问题中没有说明。

<script>
function updateText4() {
 var v1 = $('#Text1').val(),
     v2 = $('#Text2').val(),
     v3 = $('#Text3').val(), 
     v4 = '';

   if (v1.length > 0 ) {
      v4 = 1*v1;
   } 
   if (v2.length > 0) {
      v4 = v4 + (1*v2);
   } 

   if (v3.length > 0 ) {
      if (v4.length === 0) {
         v4 = '0';
      }
      v4 = v4 + '.' + (1*v3);
   }

   $('#Text4').val(v4);
}

$(document).ready(function() {
    $('#Text1, #Text2, #Text3').on('keydown', function(e) {
         updateText4();
    }); 

});
</script>

Answer 4

我不了解您需要执行什么类型的计算，这似乎是一个基本的连接...如果您将提供更多详细信息，我可以更新此代码段。到目前为止，这是一个小小的起点：

＆＃13;

.calc-field {
  text-align: center;
}
.fields {
  text-align: center;
}
#viewport {
  display: block;
  width: 100%;
}

＆＃13;

<div class="fields">
  <input class="calc-field" type="number" value="0"/>
  <input class="calc-field" type="number" value="0" />  
  <input class="calc-field" type="number" value="0" />
</div>
<hr />
<input id="viewport" type="text" value="0"/>

＆＃13;

{{1}}

＆＃13;

使用javascript显示带小数的文本框的计算

4 个答案: