Ajouter 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 + 2renvoie 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>

Ce sont en fait des chaînes, pas des nombres. Le moyen le plus simple de produire un nombre à partir d'une chaîne est de le faire précéder de +:

var x = +y + +z;

J'utilise juste Number():

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

Vous devez utiliser la parseInt()méthode de javaScript pour transformer les chaînes en nombres. À l'heure actuelle, ce sont des chaînes, donc ajouter deux chaînes les concatène, c'est pourquoi vous obtenez "12".

Utilisez parseInt (...) mais assurez-vous de spécifier une valeur de base; sinon vous rencontrerez plusieurs bogues (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!

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

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

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

• Premièrement, les champs de formulaire HTML sont limités au texte . Cela s'applique particulièrement aux zones de texte, même si vous avez pris soin de vous assurer que la valeur 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 il concatène des chaînes. Il a une préférence pour la concaténation, donc même une expression comme 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', changera les deux types en nombres, car vous ne pouvez pas multiplier les chaînes. Si l'un d'eux est incompatible, vous obtiendrez NaN, Pas un nombre.

Votre problème se produit car les données provenant du formulaire sont considérées comme une chaîne et le +sera donc concaténer plutôt que d'ajouter.

Lors de la lecture de données supposées numériques à partir d'un formulaire, vous devez toujours les pousser à travers parseInt()ou parseFloat(), selon que vous voulez un entier ou un décimal.

Notez qu'aucune fonction ne convertit vraiment une chaîne en nombre. Au lieu de cela, il analysera la chaîne de gauche à droite jusqu'à ce qu'elle atteigne un caractère numérique invalide ou jusqu'à 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 numéro 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 à usage général pour les nombres à partir de formulaires est quelque chose comme ceci:

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

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

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

Facile

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

Cela ne résumera pas le nombre; à la place, il le concaténera:

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]

Ce code fait la somme des 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;`

Il vous manque la conversion de type lors de l'étape d'ajout ...
var x = y + z;devrait êtrevar 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>

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

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>

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>

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

Si nous avons deux champs d'entrée, récupérez 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);
});

Vous pouvez faire une pré-vérification avec une expression régulière si ce sont 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;
  }

Utilisez- parseFloatle pour convertir la chaîne en nombre, y compris les valeurs décimales.

 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>

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

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

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

Une solution alternative, juste partager :):

var result=eval(num1)+eval(num2);