5568 sujets

Sémantique web et HTML

Résultat d'un calcul autrement que dans un Input ?

Bonjour,
C'est sûrement bête, mais est-il possible d'afficher le résultat d'un calcul autrement que dans un Input, pour rendre ça ... plus ... "joli" ?
L'emplacement du résultat :

<tr>
      <td><input type="number" name="totalcout" id="totalcout" step="0.01" /></td>
      <td></td>
      <td></td>
</tr>

Méthode de calcul js :

$(document).ready(function() {        
            $(".custom-control-input").click(function(event) {
                var total = 0;
                $(".custom-control-input:checked").each(function() {
                    total += parseFloat($(this).val());
                });
                
                if (total == 0) {
                    $('#totalcout').val('');
                } else {                
                    $('#totalcout').val(total);
                }
            });
});

Et le résultat :
upload/1502832458-67012-capturedu2017-08-1523-21-37.png

Merci !!!
Modérateur
Bonjour,

en javascript (et en jquery) vous pouvez insérer n'importe quel contenu ou vous le désirez:


<div class="truc"><div>
<p id="truc2"></p>
<p id="truc3">Avec déjà du contenu</p>
<script>
$('.truc').text('Du contenu'); // insère du texte
$('#truc2').html('Du contenu <b>avec des balises</b>'); // insère du html
$('#truc3').append('<em>Sans supprimer le contenu</em>');
</script>


Pour le jQuery et ces méthodes voir: http://api.jquery.com/category/manipulation/dom-insertion-inside

Utiliser un input ne sert que si on souhaite que l'utilisateur puisse modifier la valeur (et la récupérer), ce qui est rarement le cas d'un total.
Meilleure solution
Bonjour,

Merci Messieurs !

J'ai donc mon HTML comme ceci :

<table class="table table-bordered">
         <thead>
                  <tr>
                      <th align="center">Coût de revient HT</th>
                      <th align="center">Marge</th>
                      <th align="center">Prix de vente TTC</th>
                  </tr>
         </thead>
         <tbody>
                  <tr>
                       <td align="center"><p id="totalcout"></p></td>
                       <td align="center"><p id="marge"></p></td>
                       <td align="center"><p id="ttc"></p></td>
                  </tr>
          </tbody>
</table>

Et la fonction .js :

$(document).ready(function() {        
            $("input[type=checkbox]").click(function(event) {
                var total = 0;
                $("input[type=checkbox]:checked").each(function() {
                    total += parseFloat($(this).val());
                });
                
                if (total == 0) {
                    $('#totalcout').html(0);
                } else {                
                    $('#totalcout').html(total);
                }
            });

        });

Et tout va bien !

Juste une dernière question, au passage !
Pour le calcul du prix de vente TTC qui doit faire totalcout*marge=ttc,
dois-je l'inclure dans ma fonction actuelle ou construire une autre fonction ?
Sachant que la marge, c'est moi qui la rentre au clavier, donc le ttc se calcule en live à chaque changement ?

Merci
Zulkar a écrit :
Bonjour,
C'est sûrement bête, mais est-il possible d'afficher le résultat d'un calcul autrement que dans un Input, pour rendre ça ... plus ... "joli" ?

Pour mémoire, HTML5 prévoit la balise OUTPUT pour l'affichage de résultats de calculs...
MDN Web Docs OUTPUT
Sujet clos
Aller à