calculer dynamiquement la somme avec javascript

J'ai deux zones de texte Num1 et Num2 et une autre zone de texte Sum ayant la valeur 10.calculer dynamiquement la somme avec javascript

Comment est-ce que je peux faire ceci dans lequel si l'utilisateur entrera un nombre pour Num1, il l'ajoutera à Sum et changera dynamiquement le nombre affiché dans la zone de texte Sum. Si l'utilisateur va entrer un numéro dans Num2, il ajoutera également ce numéro au numéro mis à jour dans la zone de texte Sum et changera dynamiquement la valeur pour la zone de texte Sum également.

Comment faire ceci en Javascript?

Source

2010-10-27 anonymous

<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 façons de référencer les éléments de formulaire, mais celui-ci fonctionne.

Source

2010-10-27 03:43:24 Robusto

Si la fonction "addNums" est appelée à plusieurs reprises, dire avec 'setInterval', la somme peut mettre à jour régulièrement. Cela vaut mieux que de dépendre du gestionnaire "onchange" des éléments d'entrée, qui peut se déclencher à des moments inattendus pour l'utilisateur (par exemple, après le changement de focus, au lieu de la fin de la frappe de l'utilisateur). – maerics

@maerics: Je pense que vous vouliez dire ce commentaire pour la réponse de @ jtp. C'est lui qui parle des gestionnaires d'onchange. La portée de ma réponse n'a rien à voir avec l'appel de la fonction, elle illustre simplement la mécanique de l'ajout de valeurs numériques dans les éléments d'entrée. – Robusto

@maerics - Bon point pour l'événement onchange. Même avec ses bizarreries de navigateur, il s'agit techniquement d'une erreur sémantique dans ce cas puisque la saisie de la même valeur ne mettra pas à jour la somme. – JTP

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>

Source

2010-10-27 03:47:06 TarasB

theres un problème parce que quand j'utilise '+' il concaténera. – anonymous

ce ne sera pas. Il y a parseInt. – 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>

Source

2010-10-27 03:58:56 JTP

personnellement, c'est le plus propre –

Merci @ScottSEA. Bien que, après avoir lu les commentaires de maerics et Robusto, je suis allé avec l'événement onblur à la place puisque onchange ne mettra pas à jour la somme si le même nombre est entré dans le champ de saisie. :) – JTP

cela me donne une somme cumulative ... Par exemple, si je change le premier champ de 4 à 3, j'obtiens 13 au lieu de 9 (somme précédente 10 + nouveau numéro 3). Est-ce intentionnel? – redux

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

Source

2012-03-12 13:57:21

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

Source

2015-07-23 02:06:15

calculer dynamiquement la somme avec javascript

Répondre

Questions connexes