L'aggiunta di due numeri li concatena invece di calcolare la somma

Sto aggiungendo due numeri, ma non ottengo un valore corretto.

Ad esempio, facendo 1 + 2restituisce 12 e non 3

Cosa sto facendo di sbagliato in questo codice?

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>

In realtà sono stringhe, non numeri. Il modo più semplice per produrre un numero da una stringa è anteporre con +:

var x = +y + +z;

Io uso solo Number():

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

È necessario utilizzare il parseInt()metodo javaScript per convertire le stringhe in numeri. In questo momento sono stringhe, quindi l'aggiunta di due stringhe le concatena, motivo per cui ottieni "12".

Usa parseInt (...) ma assicurati di specificare un valore radix; altrimenti incontrerai diversi bug (se la stringa inizia con "0", la radice è ottale / 8 ecc.).

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

alert(x + y);

Spero che questo ti aiuti!

Basta aggiungere un metodo di fusione di tipo semplice mentre l'input è preso nel testo. Utilizza il seguente:

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

Quanto segue può essere utile in termini generali.

• Innanzitutto, i campi del modulo HTML sono limitati al testo . Ciò vale soprattutto per le caselle di testo, anche se hai fatto tutto il possibile per assicurarti che il valore appaia come un numero.

• In secondo luogo, JavaScript, nel bene e nel male, ha sovraccaricato l' +operatore con due significati: aggiunge numeri e concatena le stringhe. Ha una preferenza per la concatenazione, quindi anche un'espressione simile 3+'4'verrà trattata come concatenazione.

• In terzo luogo, JavaScript tenterà di modificare i tipi in modo dinamico, se possibile e se necessario. Ad esempio '2'*'3', entrambi i tipi cambieranno in numeri, poiché non è possibile moltiplicare le stringhe. Se uno di questi è incompatibile, otterrai NaN, Non un numero.

Il problema si verifica perché i dati provenienti dal modulo vengono considerati come una stringa e +pertanto la volontà si concatenerà anziché aggiungere.

Quando leggi i dati apparentemente numerici da un modulo, dovresti sempre passarli attraverso parseInt()o parseFloat(), a seconda che tu voglia un numero intero o un decimale.

Si noti che nessuna delle due funzioni converte veramente una stringa in un numero. Invece, analizzerà la stringa da sinistra a destra fino a quando non raggiungerà un carattere numerico non valido o alla fine e convertirà ciò che è stato accettato. Nel caso di parseFloat, ciò include un punto decimale, ma non due.

Qualsiasi cosa dopo il numero valido viene semplicemente ignorata. Falliscono se la stringa non inizia nemmeno come numero. Quindi otterrai NaN.

Una buona tecnica generica per i numeri delle forme è qualcosa del genere:

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

Se sei pronto a fondere una stringa non valida su 0, puoi utilizzare:

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

Semplice

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

Questo non riassumerà il numero; invece lo concatenerà:

var x = y + z;

Devi fare:

var x = (y)+(z);

È necessario utilizzare parseInt per specificare l'operazione sui numeri. Esempio:

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

Questo codice somma entrambe le variabili! Mettilo nella tua funzione

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

Ti manca la conversione del tipo durante il passaggio di aggiunta ...
var x = y + z;dovrebbe esserevar 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>

È molto semplice:

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

Prova questo:

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

Se abbiamo due campi di input, quindi ottenere i valori dai campi di input e quindi aggiungerli utilizzando 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);
});

Puoi fare un controllo preliminare con un'espressione regolare mentre sono numeri come

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

Usalo parseFloatconvertirà la stringa in numero compresi i valori decimali.

 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>

Puoi anche scrivere: var z = x - -y; E ottieni la risposta corretta.

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

Qui va il tuo codice analizzando le variabili nella funzione.

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

Risposta

Una soluzione alternativa, solo condivisione :):

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