Durch Hinzufügen von zwei Zahlen werden diese verkettet, anstatt die Summe zu berechnen

Ich füge zwei Zahlen hinzu, erhalte aber keinen korrekten Wert.

Wenn Sie beispielsweise 1 + 2ausführen, wird 12 und nicht 3 zurückgegeben

Was mache ich in diesem Code falsch?

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>

Sie sind eigentlich Zeichenfolgen, keine Zahlen. Der einfachste Weg, eine Zahl aus einer Zeichenfolge zu erstellen, besteht darin, ihr Folgendes voranzustellen +:

var x = +y + +z;

Ich benutze nur Number():

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

Sie müssen die JavaScript- parseInt()Methode verwenden, um die Zeichenfolgen wieder in Zahlen umzuwandeln . Im Moment handelt es sich um Zeichenfolgen, daher werden sie durch Hinzufügen von zwei Zeichenfolgen verkettet, weshalb Sie "12" erhalten.

Verwenden Sie parseInt (...) , stellen Sie jedoch sicher, dass Sie einen Radix-Wert angeben. Andernfalls treten mehrere Fehler auf (wenn die Zeichenfolge mit "0" beginnt, ist der Radix oktal / 8 usw.).

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

alert(x + y);

Hoffe das hilft!

Fügen Sie einfach eine einfache Typ-Casting-Methode hinzu, während die Eingabe im Text erfolgt. Verwenden Sie Folgendes:

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

Das Folgende kann allgemein nützlich sein.

• Erstens sind HTML-Formularfelder auf Text beschränkt . Dies gilt insbesondere für Textfelder, auch wenn Sie sich bemüht haben, sicherzustellen, dass der Wert wie eine Zahl aussieht .

• Zweitens hat JavaScript den +Operator mit zwei Bedeutungen überladen : Es fügt Zahlen hinzu und verkettet Zeichenfolgen. Es hat eine Präferenz für Verkettung, so dass selbst ein Ausdruck wie 3+'4'als Verkettung behandelt wird.

• Drittens wird JavaScript versuchen, Typen dynamisch zu ändern, wenn dies möglich ist und erforderlich ist. Beispielsweise '2'*'3'werden beide Typen in Zahlen geändert, da Sie Zeichenfolgen nicht multiplizieren können. Wenn einer von ihnen nicht kompatibel ist, erhalten Sie NaNkeine Nummer.

Ihr Problem tritt auf, weil die aus dem Formular stammenden Daten als Zeichenfolge betrachtet werden und +daher eher verkettet als hinzugefügt werden.

Wenn Sie vermeintlich numerische Daten aus einem Formular lesen, sollten Sie diese immer durch parseInt()oder drücken parseFloat(), je nachdem, ob Sie eine Ganzzahl oder eine Dezimalzahl wünschen.

Beachten Sie, dass keine der beiden Funktionen eine Zeichenfolge wirklich in eine Zahl konvertiert . Stattdessen wird die Zeichenfolge von links nach rechts analysiert, bis ein ungültiges numerisches Zeichen oder das Ende erreicht ist, und das Akzeptierte konvertiert. Im Fall von parseFloatumfasst dies einen Dezimalpunkt, aber nicht zwei.

Alles nach der gültigen Nummer wird einfach ignoriert. Sie schlagen fehl, wenn die Zeichenfolge nicht einmal als Zahl beginnt. Dann wirst du bekommen NaN.

Eine gute Allzwecktechnik für Zahlen aus Formularen ist ungefähr so:

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

Wenn Sie bereit sind, eine ungültige Zeichenfolge auf 0 zusammenzuführen, können Sie Folgendes verwenden:

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

Einfach

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

Dies wird die Zahl nicht zusammenfassen; stattdessen wird es verkettet:

var x = y + z;

Sie müssen tun:

var x = (y)+(z);

Sie müssen parseInt verwenden, um die Operation für Zahlen anzugeben. Beispiel:

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

Dieser Code summiert beide Variablen! Setzen Sie es in Ihre Funktion ein

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

Sie vermissen die Typkonvertierung während des Additionsschritts ...
var x = y + z;sollte seinvar 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>

Es ist sehr einfach:

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

Versuche dies:

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

Wenn wir zwei Eingabefelder haben, rufen Sie die Werte aus den Eingabefeldern ab und fügen Sie sie mit JavaScript hinzu.

$('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);
});

Sie können eine Vorprüfung mit regulären Ausdrücken durchführen, unabhängig davon, ob es sich um Zahlen handelt

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

Mit parseFloatdieser Option wird die Zeichenfolge in eine Zahl mit Dezimalwerten konvertiert.

 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>

Sie können auch schreiben: var z = x - -y; Und du bekommst die richtige Antwort.

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

Hier geht Ihr Code durch Parsen der Variablen in der Funktion.

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

Antworten

Eine alternative Lösung, nur teilen :):

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