Agregar dos números los concatena en lugar de calcular la suma

Estoy agregando dos números, pero no obtengo un valor correcto.

Por ejemplo, hacer 1 + 2devuelve 12 y no 3

¿Qué estoy haciendo mal en este código?

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>

En realidad son cadenas, no números. La forma más fácil de producir un número a partir de una cadena es anteponerlo con +:

var x = +y + +z;

Yo solo uso Number():

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

Debe usar el parseInt()método de javaScript para convertir las cadenas de nuevo en números. En este momento son cadenas, por lo que agregar dos cadenas las concatena, por lo que obtienes "12".

Use parseInt (...) pero asegúrese de especificar un valor de raíz; de lo contrario, se encontrará con varios errores (si la cadena comienza con "0", la raíz es octal / 8, etc.).

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

alert(x + y);

¡Espero que esto ayude!

Simplemente agregue un método de conversión de tipo simple ya que la entrada se toma en texto. Use lo siguiente:

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

Lo siguiente puede ser útil en términos generales.

• Primero, los campos de formulario HTML están limitados a texto . Esto se aplica especialmente a los cuadros de texto, incluso si se ha esforzado para garantizar que el valor se vea como un número.

• En segundo lugar, JavaScript, para bien o para mal, ha sobrecargado al +operador con dos significados: agrega números y concatena cadenas. Tiene preferencia por la concatenación, por lo que incluso una expresión como 3+'4'se tratará como concatenación.

• En tercer lugar, JavaScript intentará cambiar los tipos dinámicamente si puede y si es necesario. Por ejemplo '2'*'3', cambiará ambos tipos a números, ya que no puede multiplicar cadenas. Si uno de ellos es incompatible, obtendrá NaNNo es un número.

Su problema ocurre porque los datos que provienen del formulario se consideran una cadena y +, por lo tanto, se concatenarán en lugar de agregarse.

Al leer datos supuestamente numéricos de un formulario, siempre debe pasarlos parseInt()o parseFloat(), dependiendo de si desea un entero o un decimal.

Tenga en cuenta que ninguna función convierte verdaderamente una cadena en un número. En su lugar, analizará la cadena de izquierda a derecha hasta que llegue a un carácter numérico no válido o al final y convierta lo que se ha aceptado. En el caso de parseFloat, eso incluye un punto decimal, pero no dos.

Cualquier cosa después del número válido simplemente se ignora. Fallan si la cadena ni siquiera comienza como un número. Entonces lo conseguirás NaN.

Una buena técnica de propósito general para números de formularios es algo como esto:

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

Si está preparado para fusionar una cadena no válida a 0, puede usar:

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

Sencillo

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

Esto no resumirá el número; en su lugar lo concatenará:

var x = y + z;

Necesitas hacer:

var x = (y)+(z);

Debe usar parseInt para especificar la operación en números. Ejemplo:

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

¡Este código suma las dos variables! Ponlo en tu función

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

Te falta la conversión de tipo durante el paso de adición ...
var x = y + z;debe servar 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 muy 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>

Prueba esto:

<!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 tenemos dos campos de entrada, obtenga los valores de los campos de entrada y luego agréguelos usando 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);
});

Puede hacer una comprobación previa con expresión regular si son números como

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

Úselo parseFloatconvertirá una cadena a un número que incluya valores decimales.

 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>

También puedes escribir: var z = x - -y; Y obtienes la respuesta correcta.

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

Aquí va tu código analizando las variables en la función.

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

Responder

Una solución alternativa, solo compartir :):

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