calculer la somme de façon dynamique avec javascript

J'ai deux zones de texte Num1 et Num2 et une autre zone de texte Sum ayant la valeur 10.

Comment puis-je faire où si l'utilisateur doit entrer un numéro pour Num1, il va ajouter à Sum et de modifier dynamiquement le numéro affiché dans la Sum zone de texte. Si l'utilisateur doit entrer un nombre dans Num2 il sera également ajouter ce numéro à la mise à jour du nombre indiqué dans Sum zone de texte et modifier dynamiquement la valeur de Sum zone de texte aussi.

Comment faire cela en Javascript?

OriginalL'auteur anonymous | 2010-10-27

input javascript

Quelque chose comme ça:

<input type="text" id="Num1" value="1" onblur="recalculateSum();"/>
<span>+</span>
<input type="text" id="Num2" value="1" onblur="recalculateSum();"/>
<span>=</span>
<input type="text" id="Sum" value=""/>
<script>

    function recalculateSum()
    {
        var num1 = parseInt(document.getElementById("Num1").value);
        var num2 = parseInt(document.getElementById("Num2").value);
        document.getElementById("Sum").value = num1 + num2;

    }

</script>

il y a un problème, parce que quand j'utilise " + " il va concaténer.
il ne sera pas. Il y a parseInt.

OriginalL'auteur TarasB

Une autre version.


<!DOCTYPE html>
<html>
<head>
<title>Summer</title>
</head>
<body>
  Num 1: <input type="text" id="num1" name="num1" value="4"/><br />
  Num 2: <input type="text" id="num2" name="num2" value="6"/><br />
  Sum    <input type="text" id="sum"  name="sum" value="10">

<script type="text/javascript">
  var _num1 = document.getElementById('num1');
  var _num2 = document.getElementById('num2');
  var _sum  = document.getElementById('sum');

  _num1.onblur = function(){
    _sum.value = (parseInt(_sum.value,10) + parseInt(this.value,10));
  };
  _num2.onblur = function(){
    _sum.value = (parseInt(_sum.value,10) + parseInt(this.value,10));
  };  
</script>
</body>
</html>

personnellement, c'est plus propre
Merci @ScottSEA. Si après avoir lu les commentaires de maerics et Robusto, je suis allé avec l'événement onblur place depuis onchange ne sera pas de mise à jour de la somme si le même nombre est entré dans le champ de saisie. 🙂
cela me donne une somme cumulative... Par exemple, si je change le premier champ de 4 à 3, je reçois 13 au lieu de 9 (précédent somme de 10 + nouveau numéro 3). Est-ce intentionnel?
tant pis, je me le procurer. Pour simplement la somme des deux nombres, les fonctions doivent être remplacés par: _sum.valeur = (parseInt(_num1.valeur,10) + parseInt(_num2.valeur,10));

OriginalL'auteur T.P.

3
```
<input type="text" id="Num1" name="Num1"/>
<input type="text" id="Num2" name="Num2"/>
<input type="text" id="Sum" name="Sum"/>


function addNums() {
  var num1 = parseInt(document.getElementById('Num1').value,10);
  var num2 = parseInt(document.getElementById('Num2').value,10)
  document.getElementById('Sum').value = (num1 + num2).toString();
}
```
Il existe d'autres moyens pour faire référence à la forme des articles, mais celui-ci fonctionne.

Si le "addNums" la fonction est appelée plusieurs fois, dire avec setInterval, alors la somme peut être mise à jour régulièrement. C'est mieux qu'en fonction de la "onchange" gestionnaire des éléments d'entrée, ce qui peut mettre le feu à des moments inattendus pour l'utilisateur (par exemple, après l'accent est modifié, au lieu d'lorsque l'utilisateur "finitions" de la frappe).
Je pense que vous vouliez dire, ce commentaire de @jtp de réponse. Il est le seul à parler onchange gestionnaires. La portée de ma réponse n'avait rien à voir avec lorsque la fonction est appelée, elle simplement illustré la mécanique de l'ajout de valeurs numériques des éléments d'entrée.
Bon point pour l'événement onchange. Même avec son navigateur bizarreries, c'est techniquement une erreur sémantique dans ce cas, depuis la saisie de la même valeur ne sera pas de mise à jour de la somme.
désolé, mon commentaire a été source de confusion, j'ai essayé d'expliquer comment votre mécanique pourrait être combiné avec un déclencheur qui le rend plus robuste qu'une solution qui utilise des "onchange" gestionnaires. (+1)

OriginalL'auteur Robusto

<input type="text" id="Num1" value="1" onblur="recalculateSum();"/>

<input type="text" id="Num2" value="1" onblur="recalculateSum();"/>

<input type="text" id="Sum" value=""/>
<script>

    function recalculateSum()
    {
        var num1 = parseInt(document.getElementById("Num1").value);
        var num2 = parseInt(document.getElementById("Num2").value);
        document.getElementById("Sum").value = num1 + num2;

    }

</script>

OriginalL'auteur Jean de Dieu Musengamana

<!DOCTYPE html>
<html>
<head>

    <script type="text/javascript">
function calculate(){
    var x=parseInt(document.getElementById("first").value);
    var y=parseInt(document.getElementById("second").value);
    document.getElementById("answer").value=(x+y);
    }
    </script>

    <title>exam</title>
</head>

<body>
    <form>
        First:<input id="first" name="first" type="text"><br>
        Second:<input id="second" name="second" type="text"><br>
        Answer:<input id="answer" name="answer" type="text"><br>
        <input onclick="calculate()" type="button" value="Addition">
    </form>
</body>
</html>

OriginalL'auteur Zoyeb Shaikh

Vous devez vous connecter pour publier un commentaire.