web-dev-qa-db-fra.com

L'ajout de deux nombres les concatène au lieu de calculer la somme

J'ajoute deux nombres, mais je n'obtiens pas une valeur correcte.

Par exemple, faire 1 + 2 renvoie 12 et non 3

Qu'est-ce que je fais mal dans ce code?

function myFunction() {
  var y = document.getElementById("txt1").value;
  var z = document.getElementById("txt2").value;
  var x = y + z;
  document.getElementById("demo").innerHTML = x;
}
<p>
  Click the button to calculate x.
  <button onclick="myFunction()">Try it</button>
</p>
<p>
  Enter first number:
  <input type="text" id="txt1" name="text1" value="1">
  Enter second number:
  <input type="text" id="txt2" name="text2" value="2">
</p>
<p id="demo"></p>
javascripthtml
161
okconfused

Ce sont en fait des chaînes, pas des nombres. Le moyen le plus simple de produire un nombre à partir d'une chaîne consiste à l'ajouter au début avec +:

var x = +y + +z;
307
elclanrs

Je viens d'utiliser Number():

var i=2;  
var j=3;  
var k = Number(i) + Number(j); // 5
113
gerard

Vous devez utiliser la méthode parseInt() de javaScript pour reconvertir les chaînes en chiffres. Pour le moment, ce sont des chaînes, donc l'ajout de deux chaînes les concatène, c'est pourquoi vous obtenez "12".

28
mitim

Utilisez parseInt (...) mais assurez-vous de spécifier une valeur de base; sinon, vous rencontrerez plusieurs bugs (si la chaîne commence par "0", la base est octal/8, etc.).

var x = parseInt(stringValueX, 10);
var y = parseInt(stringValueY, 10);

alert(x + y);

J'espère que cela t'aides!

22
Zorayr

Ajoutez simplement une méthode de transtypage simple car l'entrée est prise en texte. Utilisez le suivant:

    var y = parseInt(document.getElementById("txt1").value);
    var z = parseInt(document.getElementById("txt2").value);
    var x = y + z;
5
Vibhav Shreshth

Facile

var result = parseInt("1") + parseInt("2");
console.log(result ); // Outputs 3
5
Murtaza Khursheed Hussain

Cela ne résumera pas le nombre; au lieu de cela, il va concaténer:

var x = y + z;

Tu as besoin de faire:

var x = (y)+(z);

Vous devez utiliser parseInt pour spécifier l'opération sur les nombres. Exemple:

var x = parseInt(y) + parseInt(z); [final soulution, as everything us]
4
Pushp Singh

Ce qui suit peut être utile en termes généraux.

  • Premièrement, les champs de formulaire HTML sont limités à text. Cela s'applique en particulier aux zones de texte, même si vous vous êtes efforcé de vous assurer que la valeur ressemble ressemble à un nombre.

  • Deuxièmement, JavaScript, pour le meilleur ou pour le pire, a surchargé l'opérateur + avec deux significations: il ajoute des nombres et concatène des chaînes. Il a une préférence pour la concaténation, de sorte que même une expression telle que 3+'4' sera traitée comme une concaténation.

  • Troisièmement, JavaScript tentera de changer les types de manière dynamique s'il le peut et s'il le faut. Par exemple, '2'*'3' modifiera les deux types en nombres, car vous ne pouvez pas multiplier les chaînes. Si l'un d'entre eux est incompatible, vous obtiendrez NaN, pas un nombre.

Votre problème survient parce que les données provenant du formulaire sont considérées comme une chaîne et que le + sera donc concaténé plutôt que ajouté.

Lors de la lecture de données supposées numériques dans un formulaire, vous devez toujours le faire passer parseInt() ou parseFloat(), selon que vous souhaitiez un entier ou une décimale.

Notez que ni l'une ni l'autre ne fonctionne vraiment convertit une chaîne en un nombre. Au lieu de cela, il analysera la chaîne de gauche à droite jusqu'à atteindre un caractère numérique non valide ou à la fin et convertira ce qui a été accepté. Dans le cas de parseFloat, cela inclut un point décimal, mais pas deux.

Tout ce qui suit le nombre valide est simplement ignoré. Ils échouent si la chaîne ne commence même pas par un nombre. Ensuite, vous obtiendrez NaN.

Une bonne technique d'usage général pour les nombres à partir de formulaires ressemble à ceci:

var data=parseInt(form['data'].value);  //  or parseFloat

Si vous êtes prêt à fusionner une chaîne non valide à 0, vous pouvez utiliser:

var data=parseInt(form['data'].value) || 0;
3
Manngo

Ce code additionne les deux variables! Mettez-le dans votre fonction

var y = parseInt(document.getElementById("txt1").value);
var z = parseInt(document.getElementById("txt2").value);
var x = (y +z);
document.getElementById("demo").innerHTML = x;`
3
taha
  <input type="text" name="num1" id="num1" onkeyup="sum()">
  <input type="text" name="num2" id="num2" onkeyup="sum()">
  <input type="text" name="num2" id="result">

  <script>
     function sum()
     {

        var number1 = document.getElementById('num1').value;
        var number2 = document.getElementById('num2').value;

        if (number1 == '') {
           number1 = 0
           var num3 = parseInt(number1) + parseInt(number2);
           document.getElementById('result').value = num3;
        }
        else if(number2 == '')
        {
           number2 = 0;
           var num3 = parseInt(number1) + parseInt(number2);
           document.getElementById('result').value = num3;
        }
        else
        {
           var num3 = parseInt(number1) + parseInt(number2);
           document.getElementById('result').value = num3;
        }

     }
  </script>
1
Ahmad Ajaj

C'est très simple:

<html>

    <body>
        <p>Click the button to calculate x.</p>
        <button onclick="myFunction()">Try it</button>
        <br/>
        <br/>Enter first number:
        <input type="text" id="txt1" name="text1">Enter second number:
        <input type="text" id="txt2" name="text2">
        <p id="demo"></p>

        <script>
            function myFunction() {
                var y = document.getElementById("txt1").value;
                var z = document.getElementById("txt2").value;
                var x = +y + +z;
                document.getElementById("demo").innerHTML = x;
            }
        </script>
    </body>
</html>
1
user3056602

Si nous avons deux champs d'entrée, obtenez les valeurs des champs d'entrée, puis ajoutez-les à l'aide de JavaScript.

$('input[name="yourname"]').keyup(function(event) {
    /* Act on the event */
    var value1 = $(this).val();
    var value2 = $('input[name="secondName"]').val();
    var roundofa = +value2+ +value1;

    $('input[name="total"]').val(addition);
});
1
Asad Ali
    <head>
        <script type="text/javascript">
            function addition()
            {
                var a = parseInt(form.input1.value);
                var b = parseInt(form.input2.value);
                var c = a+b
                document.write(c);
            }
        </script>
    </head>

    <body>
        <form name="form" method="GET">
        <input type="text" name="input1" value=20><br>
        <input type="text" name="input2" value=10><br>
        <input type="button" value="ADD" onclick="addition()">
        </form>
    </body>
</html>
1
Lakshmi

Essaye ça:

<!DOCTYPE html>
<html>

    <body>
        <p>Add Section</p>

        <label>First Number:</label>
        <input id="txt1"  type="text"/><br />
        <label>Second Number:</label>
        <input id="txt2"  type="text"/><br />

        <input type="button" name="Add" value="Add" onclick="addTwoNumber()"/>
        <p id="demo"></p>

        <script>
            function myFunction() {
                document.getElementById("demo").innerHTML = Date();
            }

            function addTwoNumber(){
                var a = document.getElementById("txt1").value;
                var b = document.getElementById("txt2").value;

                var x = Number(a) + Number(b);
                document.getElementById("demo").innerHTML = "Add Value: " + x;
            }
        </script>
    </body>
</html>
1
Mohammed Ebrahim

La conversion de type est manquante lors de l'étape d'addition ...
var x = y + z; devrait être var x = parseInt(y) + parseInt(z);

 <!DOCTYPE html>

 <html>
 <body>
  <p>Click the button to calculate x.</p>
  <button onclick="myFunction()">Try it</button>
  <br/>
  <br/>Enter first number:
  <input type="text" id="txt1" name="text1">Enter second number:
  <input type="text" id="txt2" name="text2">
  <p id="demo"></p>
 <script>
    function myFunction() 
    {
      var y = document.getElementById("txt1").value;
      var z = document.getElementById("txt2").value;
      var x = parseInt(y) + parseInt(z);
      document.getElementById("demo").innerHTML = x;
    }
 </script>
 </body>
 </html>
1
sharjeel

Vous pouvez faire une vérification préalable avec une expression régulière, que ce soit des nombres comme

function myFunction() {
    var y = document.getElementById("txt1").value;
    var z = document.getElementById("txt2").value;
    if((x.search(/[^0-9]/g) != -1)&&(y.search(/[^0-9]/g) != -1))
      var x = Number(y)+ Number(z);
    else
      alert("invalid values....");
    document.getElementById("demo").innerHTML = x;
  }
0
Ram

Utilisez parseFloat, la chaîne sera convertie en nombre, valeurs décimales comprises.

 function myFunction() {
      var y = document.getElementById("txt1").value;
      var z = document.getElementById("txt2").value;
      var x = parseFloat(y) + parseFloat(z);
      document.getElementById("demo").innerHTML = x;
    }



<p>
  Click the button to calculate x.
  <button onclick="myFunction()">Try it</button>
</p>
<p>
  Enter first number:
  <input type="text" id="txt1" name="text1" value="1">
  Enter second number:
  <input type="text" id="txt2" name="text2" value="2">
</p>
<p id="demo"></p>
0
Poorna Rao

Voici votre code en analysant les variables de la fonction.

<html>
  <body>
    <p>Click the button to calculate x.</p>
    <button onclick="myFunction()">Try it</button>
    <br/>
    <br/>Enter first number:
    <input type="text" id="txt1" name="text1">
    <br>Enter second number:
    <input type="text" id="txt2" name="text2">
    <p id="demo"></p>
    <script>
      function myFunction() {
        var y = parseInt(document.getElementById("txt1").value);
        var z = parseInt(document.getElementById("txt2").value);
        var x = y + z;
        document.getElementById("demo").innerHTML = x;
      }
    </script>
  </body>
</html>

Réponse

Enter image description here

0
Manoj Krishna

Vous pouvez également écrire: var z = x - -y; Et vous obtenez une réponse correcte.

<body>

<input type="text" id="number1" name="">
<input type="text" id="number2" name="">
<button type="button" onclick="myFunction()">Submit</button>

<p id="demo"></p>

    <script>
    function myFunction() {
        var x, y ;

        x = document.getElementById('number1').value;
        y = document.getElementById('number2').value;

        var z = x - -y ;

        document.getElementById('demo').innerHTML = z;
    }
    </script>
</body>
0
P.A.010