Home / Questions / 30369
Accepted
Efrain Mejias C
Asked: 2020-10-29 03:27:58 +0800 CST 2020-10-29 03:27:58 +0800 CST

如何获取在 HTML 文本字段中输入的值？

  • 772

我需要在文本字段中插入一个金额......当我离开该字段时，我必须计算该金额的税（税 = 金额 * 0.12）以及总额（总计 = 金额 + 税）并设置这些值​​​自动在其他文本字段中。

HTML 代码

<input type="text" id="Monto" name="Monto" placeholder="Monto" onchange="CalculoIva()" required />
<input type="text" id="Iva" name="Iva" placeholder="Iva"  required />
<input type="text" id="Total" name="Total" placeholder="Total"  required />

我正在尝试这个，但它不起作用

 <script lang="javascript" type="text/javascript">
       var monto = 0;
       onchange = CalculoIva();
       function CalculoIva() {
           monto = document.getElementById('Monto').innerText ;
           var iva = parseFloat(monto) * 0.12;
           var total = parseFloat(monto) + parseFloat(iva);
           document.getElementById("Iva").innerHTML = iva.toString();
           document.getElementById("Total").innerHTML = total.toString();
       }
   </script>
javascript

2 Answers

  1. 你应该做这样的事情

    function CalculoIva() {
    var monto = document.getElementById('Monto').value;
    if(isNaN(monto)){
        alert("Introduce un numero, por favor");
        document.getElementById('Monto').value = "";
    }else{
        var iva = parseFloat(monto) * 0.12;
        var total = parseFloat(monto) + parseFloat(iva);
        document.getElementById("Iva").value = iva;
        document.getElementById("Total").value = total;
    }
};
    <input type="text" id="Monto" name="Monto" placeholder="Monto" onChange="CalculoIva();" required />
<input type="text" id="Iva" name="Iva" placeholder="Iva" required />
<input type="text" id="Total" name="Total" placeholder="Total" required />

    • 3
  2. Best Answer

    我已经从sioesi的答案中重构了代码

    • 删除了 HTML 中的内联javascript
    • 输入：iva并total更改为readonly
    • 该功能CalculoIva()现在可重用
    • 检查的值是否monto为数字
    • 如果它不是有效数字，则重置所有字段
    • 用逗号改变了点（欧洲标准）
    • 结果格式iva并total保留 2 位小数 (0.00)

    function CalculoIva(monto, iva, total) {
  
  montoParse = parseFloat(monto.value);
  
  if (typeof montoParse === 'number' && !isNaN(montoParse)) {
    
      var ivaCalc   = montoParse * 0.12;
      var totalCalc = montoParse + ivaCalc;
    
      iva.value   = ivaCalc.toFixed(2).replace('.', ',');
      total.value = totalCalc.toFixed(2).replace('.', ',');
    
  } else {
    
      iva.value   = '';
      total.value = '';
      monto.value = '';
      console.log('Introduce un numero válido');
  }
}

var monto = document.getElementById('Monto');
var iva   = document.getElementById('Iva');
var total = document.getElementById('Total');


monto.onchange = function(){ CalculoIva(monto, iva, total); }
    <input type="text" id="Monto" name="Monto" placeholder="Monto" required>
<input type="text" id="Iva" name="Iva" placeholder="Iva"  readonly>
<input type="text" id="Total" name="Total" placeholder="Total" readonly>

    • 3