HTML：接受十进制数

Question

“总”文本字段对编码的数字求和，但不总和十进制数或者不接受十进制数。这是我的HTML代码。

 <th scope="col"><input type="text"  onblur="findTotal()" name="fil" id="fil" /></th>
              <th scope="col"><input type="text" onblur="findTotal()" name="eng" id="eng" /></th>
              <th scope="col"><input type="text" onblur="findTotal()" name="sci" id="sci" /></th>
              <th scope="col"><input type="text" onblur="findTotal()" name="math" id="math" /></th>
              <th scope="col"><input type="text" onblur="findTotal()" name="aralp" id="aralp" /></th>
              <th scope="col"><input type="text" onblur="findTotal()" name="mapeh" id="mapeh" /></th>
              <th scope="col"><input type="text" onblur="findTotal()" name="esp" id="esp" /></th>
              <th scope="col"><input type="text" onblur="findTotal()" name="mtb" id="mtb" /></th>
              <th scope="col"><input type="text" onblur="findTotal()" name="epp" id="epp" /></th>
              <th scope="col"><input type="text" name="total" id="total" /></th>


<script>
    function findTotal()
    {
        var arr = document.querySelectorAll('[name="fil"], [name="sci"], [name="eng"], [name="aralp"], [name="esp"], [name="mapeh"], [name="math"], [name="mtb"], [name="epp"] ');
        var tot=0;
        for(var i=0;i<arr.length;i++)
        {
        if(parseInt(arr[i].value))
            tot += parseInt(arr[i].value);
        }
            document.getElementById('total').value = tot;
    }
    </script>

这是结果......

Answer 1

将浮点值转换为整数将产生意外结果。

而不是parseInt() 使用parseFloat()

工作示例： -

function findTotal()
{
    var arr = document.querySelectorAll('[name="fil"], [name="sci"], [name="eng"], [name="aralp"], [name="esp"], [name="mapeh"], [name="math"], [name="mtb"], [name="epp"] ');
    var tot=0;
    for(var i=0;i<arr.length;i++)
    {
    if(parseFloat(arr[i].value))
        tot += parseFloat(arr[i].value);
    }
    document.getElementById('total').value = tot;
}

<th scope="col">
  <input type="text"  onblur="findTotal()" name="fil" id="fil" />
</th>
<th scope="col">
  <input type="text" onblur="findTotal()" name="eng" id="eng" />
</th>
<th scope="col">
  <input type="text" onblur="findTotal()" name="sci" id="sci" />
</th>
<th scope="col">
  <input type="text" onblur="findTotal()" name="math" id="math" />
</th>
<th scope="col">
  <input type="text" onblur="findTotal()" name="aralp" id="aralp" />
</th>
<th scope="col">
  <input type="text" onblur="findTotal()" name="mapeh" id="mapeh" />
</th>
<th scope="col">
  <input type="text" onblur="findTotal()" name="esp" id="esp" />
</th>
<th scope="col">
  <input type="text" onblur="findTotal()" name="mtb" id="mtb" />
</th>
<th scope="col">
  <input type="text" onblur="findTotal()" name="epp" id="epp" />
</th>
<th scope="col">
  <input type="text" name="total" id="total" />
</th>

Answer 2

您正在使用parseInt，它将十进制值转换为int，因此它获得整数result.Remove parseInt并且总计添加parseFloat使用如下代码： -

<script type="text/javascript">
function findTotal()
{
    var arr = document.querySelectorAll('[name="fil"], [name="sci"], [name="eng"], [name="aralp"], [name="esp"], [name="mapeh"], [name="math"], [name="mtb"], [name="epp"] ');
    var tot=0;
    for(var i=0;i<arr.length;i++)
    {
    if(parseFloat(arr[i].value))
        tot += parseFloat(arr[i].value);
    }
        document.getElementById('total').value = tot;
}
</script>

＆＃13;

＆＃13;

function findTotal()
{
    var arr = document.querySelectorAll('[name="fil"], [name="sci"], [name="eng"], [name="aralp"], [name="esp"], [name="mapeh"], [name="math"], [name="mtb"], [name="epp"] ');
    var tot=0;
    for(var i=0;i<arr.length;i++)
    {
    if(parseFloat(arr[i].value))
        tot += parseFloat(arr[i].value);
    }
        document.getElementById('total').value = tot;
}

＆＃13;

<th scope="col"><input type="text"  onblur="findTotal()" name="fil" id="fil" /></th>
          <th scope="col"><input type="text" onblur="findTotal()" name="eng" id="eng" /></th>
          <th scope="col"><input type="text" onblur="findTotal()" name="sci" id="sci" /></th>
          <th scope="col"><input type="text" onblur="findTotal()" name="math" id="math" /></th>
          <th scope="col"><input type="text" onblur="findTotal()" name="aralp" id="aralp" /></th>
          <th scope="col"><input type="text" onblur="findTotal()" name="mapeh" id="mapeh" /></th>
          <th scope="col"><input type="text" onblur="findTotal()" name="esp" id="esp" /></th>
          <th scope="col"><input type="text" onblur="findTotal()" name="mtb" id="mtb" /></th>
          <th scope="col"><input type="text" onblur="findTotal()" name="epp" id="epp" /></th>
          <th scope="col"><input type="text" name="total" id="total" /></th>

＆＃13;

＆＃13;

＆＃13;

Answer 3

问题在于你要转向int。

function findTotal() {
  var arr = document.querySelectorAll('[name="fil"], [name="sci"], [name="eng"], [name="aralp"], [name="esp"], [name="mapeh"], [name="math"], [name="mtb"], [name="epp"] ');
  var tot = 0;
  for (var i = 0; i < arr.length; i++) {
    tot += Number(arr[i].value);
  }
  document.getElementById('total').value = tot;
}

th,
td {
  border: 1px solid;
}

<table>
  <tr>
    <th scope="col">fil</th>
    <th scope="col">eng</th>
    <th scope="col">sci</th>
    <th scope="col">math</th>
    <th scope="col">aralp</th>
    <th scope="col">mapeh</th>
    <th scope="col">esp</th>
    <th scope="col">mtb</th>
    <th scope="col">epp</th>
    <th scope="col">total</th>
  </tr>
  <tr>
    <th scope="col"><input type="text" onblur="findTotal()" name="fil" id="fil" /></th>
    <th scope="col"><input type="text" onblur="findTotal()" name="eng" id="eng" /></th>
    <th scope="col"><input type="text" onblur="findTotal()" name="sci" id="sci" /></th>
    <th scope="col"><input type="text" onblur="findTotal()" name="math" id="math" /></th>
    <th scope="col"><input type="text" onblur="findTotal()" name="aralp" id="aralp" /></th>
    <th scope="col"><input type="text" onblur="findTotal()" name="mapeh" id="mapeh" /></th>
    <th scope="col"><input type="text" onblur="findTotal()" name="esp" id="esp" /></th>
    <th scope="col"><input type="text" onblur="findTotal()" name="mtb" id="mtb" /></th>
    <th scope="col"><input type="text" onblur="findTotal()" name="epp" id="epp" /></th>
    <th scope="col"><input type="text" name="total" id="total" /></th>
  </tr>
</table>

修改：在使用arr.map().reduce()之前，我的解决方案无效，因为document.querySelectorAll()是NodeList而不是Array。

Answer 4

只需将parseInt()替换为parseFloat()即可使用小数而不是整数。

<script type="text/javascript">
function findTotal()
{
    var arr = document.querySelectorAll('[name="fil"], [name="sci"], [name="eng"], [name="aralp"], [name="esp"], [name="mapeh"], [name="math"], [name="mtb"], [name="epp"] ');
    var tot=0;
    for(var i=0;i<arr.length;i++)
    {
    if(parseFloat(arr[i].value))
        tot += parseFloat(arr[i].value);
    }
    document.getElementById('total').value = tot;
}
</script>