使用javascript显示带小数的文本框的计算[关闭]

Posted 2023-05-07

【中文标题】使用javascript显示带小数的文本框的计算[关闭]

【英文标题】：Show calculation of textboxes with decimal using javascript [closed]

【发布时间】：2017-02-23 10:11:07

【问题描述】：

我有 4 个textboxes。我想将所有三个textboxes 的计算结果显示到第四个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%;" />

【问题讨论】：

试试这个：anaesthetist.com/mnm/javascript/calc.htm

这并不复杂...请尝试一下。如果您已经尝试过，您将通过显示该代码获得更多帮助。缺乏基础研究和努力让你投了很多反对票

@charlietfl：我正在尝试。但小数点让我担心

向我们展示您的尝试...不要只说“我该怎么做”

【参考方案1】：

试试这个：

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

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

<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>

【讨论】：

第四个文本框如何显示计算值？

只执行我提供的那行代码。 $('#Text4').val() 调用将第四个文本框的值设置为其包装的计算结果。

查看我添加到答案中的 sn-p。

感谢 MJH 的帮助

【参考方案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);

【参考方案3】：

我不明白你需要执行什么类型的计算，这似乎是一个基本的串联......如果你能提供更多细节，我可以更新这个 sn-p。 现在，这是一个小小的起点：

var Calculator = (function() 
  function Calculator(fields, viewport) 
    var self = this;
    this.fields = fields;
    this._state =  result: 0 ;
    this.decimals = 2;
    this.viewport = viewport;
    
    this.fields
      .forEach(function(field) 
        field.addEventListener('change', self.onChange.bind(self, field))
      )
    ;
  
  
  Calculator.prototype.calculate = function(values) 
    // what do you need to do here?
    return values.reduce(function(res, value, i) 
      if(i === 2) 
        res = res.concat('.');
      
      return res.concat(value);
    , "");
  ;
  
  Calculator.prototype.onChange = function(field, event) 
    
    this.values = Array.prototype.map.call(this.fields, function(f) 
      return Number(f.value) || 0;
    );
    
    this._state.result = this.calculate(this.values);
    
    this.render();
  
  
  Calculator.prototype.render = function() 
    this.viewport.value = Number(this._state.result).toFixed(this.decimals);
  
  return Calculator;
)();

document.addEventListener('DOMContentLoaded', function() 
  var fields = document.querySelectorAll('.calc-field');
  var viewport = document.querySelector('#viewport');
  
  var calculator = new Calculator(fields, viewport);
  calculator.render();
);

.calc-field 
  text-align: center;

.fields 
  text-align: center;

#viewport 
  display: block;
  width: 100%;

<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"/>

【参考方案4】：

您可以将此代码放在</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>