total in the table dynamically javascript

Question

I have a small problem, I shall wish to calculate the total amount of the lines of the top already calculated in a Javascript function.

The javascript code:

    function calculer(e){

 var i = e.getAttribute('id').length;
 var input_identifier = e.getAttribute('id').substring(i-1,i);
 var subtotal = document.getElementById('subtotal'+input_identifier)
 var quantity = e.value;
 var montant = document.getElementById('montant'+input_identifier);
 subtotal.textContent = ( parseFloat(quantity) * parseFloat(montant.value)).toFixed(2);
 CalculateTotal(e);
 return;
}
function CalculateTotal(e) {
        var subtotal = querySelectorAll('.subtotal');
        var subtotalCount = subtotal.length;
        var subtotalValue;
        var total = 0;
        for (var i = 0; i < subtotalCount; i++) {
            subtotalValue = Number(subtotal[i].textContent);
            if (!isNaN(subtotalValue)) total += subtotal;
        }
 subtotal.textContent = parseFloat(total).toFixed(2);
}

And the PHP:

<div id="contenu">
  <h2>Renseigner ma fiche de frais du mois <?php echo $numMois."-".$numAnnee ?></h2>

  <form method="POST"  action="index.php?uc=gererFrais&action=validerMajFraisForfait">
  <div class="corpsForm">

      <fieldset>
        <legend>Eléments forfaitisés
        </legend>
<table width=100%>
        <tr>
        <td>Libelle</td>
        <td>Nombre</td>
        <td>Montant unitaire</td>
        <td>Montant total</td>
    </tr>

    ?>
<tr>
    <td width=20%><?php echo $libelle ?></td>
    <td width=20%><input type="text" id="<?php echo 'idFrais'.$incr; ?>" name="lesFrais[<?php echo $idFrais?>]"  size="10" min="0" autocomplete="off" maxlength="30" value="<?php echo $quantite?>"  onkeyup="calculer(this)">
    <td width=20%><input type="text" id="<?php echo 'montant'.$incr; ?>" value="<?php echo $montant ?>" disabled></td>
    <td id='subtotal<?php echo $incr;?>' width=20%><?php echo $quantite*$montant; ?></td>
</tr>
    <?php
          $incr ++;
        }
    ?>
<tr>
    <td colspan="3">Total : </td>
    <td id='total' width=20%></td>
</tr>

    </table>
      </fieldset>
  </div>
  <div class="piedForm">
  <p>
    <input id="ok" type="submit" value="Valider" size="20" />
    <input id="annuler" type="reset" value="Effacer" size="20" />
  </p> 
  </div>

Screen:

Answer 1

I have try this :

    function calculer(e){

 var i = e.getAttribute('id').length;
 var input_identifier = e.getAttribute('id').substring(i-1,i);
 var subtotal = document.getElementById('subtotal'+input_identifier)
 var quantity = e.value;
 var montant = document.getElementById('montant'+input_identifier);
 subtotal.textContent = ( parseFloat(quantity) * parseFloat(montant.value)).toFixed(2);
 return;
}
function CalculateTotal(e) {
        var subtotal = querySelectorAll('.subtotal');
        var subtotalCount = subtotal.length;
        var subtotalValue;
        var total = 0;
        for (var i = 0; i < subtotalCount; i++) {
            subtotalValue = Number(subtotal[i].textContent);
            if (!isNaN(subtotalValue)) total += subtotal;
        }
 total.textContent = (parseFloat(total) + parseFloat(subtotalValue)).toFixed(2);
}