Q: HTML: Accepting decimal number The "total" text field sum up the numbers encoded but doesn't sum up the decimal numbers or maybe doesn't accept decimal numbers. This is my html code.


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


This is the result...


A: Converting float value to integer will give unexpected results.
Instead of parseInt() use parseFloat()
Working example:-


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>



A: You are using parseInt which converts the decimal values as int so it is getting integer result.Remove parseInt and in total add parseFloat Use code like:-
<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>



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>



A: The problem is that you're casting to 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>


Edit: My solution before using arr.map().reduce() did not work as the result of document.querySelectorAll() is a NodeList not an Array.

A: Just replace parseInt() with parseFloat() to use decimal numbers instead of whole numbers.
<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>

