A adição de dois números concatena-os em vez de calcular a soma

Estou adicionando dois números, mas não recebo o valor correto.

Por exemplo, fazer 1 + 2retornos 12 e não 3

O que estou fazendo de errado neste 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>

Na verdade, são strings, não números. A maneira mais fácil de produzir um número a partir de uma string é acrescentá-lo com +:

var x = +y + +z;

Eu apenas uso Number():

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

Você precisa usar o parseInt()método javaScript para transformar as strings novamente em números. No momento, eles são strings; portanto, a adição de duas strings concatena-as, e é por isso que você está recebendo "12".

Use parseInt (...), mas certifique-se de especificar um valor de raiz; caso contrário, você encontrará vários bugs (se a sequência começar com "0", a raiz será octal / 8 etc.).

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

alert(x + y);

Espero que isto ajude!

Basta adicionar um método de conversão de tipo simples, pois a entrada é inserida em texto. Use o seguinte:

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

O seguinte pode ser útil em termos gerais.

• Primeiro, os campos do formulário HTML são limitados ao texto . Isso se aplica especialmente às caixas de texto, mesmo que você tenha se esforçado para garantir que o valor pareça um número.

• Segundo, o JavaScript, para o bem ou para o mal, sobrecarregou o +operador com dois significados: adiciona números e concatena as strings. Tem uma preferência por concatenação, portanto, mesmo uma expressão como 3+'4'será tratada como concatenação.

• Terceiro, o JavaScript tentará alterar os tipos dinamicamente, se puder, e se for necessário. Por exemplo '2'*'3', os dois tipos serão alterados para números, pois você não pode multiplicar cadeias. Se um deles for incompatível, você receberá NaN, Não é um número.

Seu problema ocorre porque os dados provenientes do formulário são considerados como uma seqüência de caracteres e +, portanto, concatenam em vez de adicionar.

Ao ler dados supostamente numéricos de um formulário, você deve sempre enviá-los parseInt()ou parseFloat(), dependendo se você deseja um número inteiro ou um decimal.

Observe que nenhuma das funções converte verdadeiramente uma seqüência de caracteres em um número. Em vez disso, ele analisará a sequência da esquerda para a direita até chegar a um caractere numérico inválido ou até o final e converterá o que foi aceito. No caso de parseFloat, isso inclui um ponto decimal, mas não dois.

Qualquer coisa após o número válido é simplesmente ignorada. Eles falham se a string nem começa como um número. Então você receberá NaN.

Uma boa técnica de propósito geral para números de formulários é algo como isto:

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

Se você estiver preparado para combinar uma sequência inválida a 0, poderá usar:

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

Simples

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

Isso não resume o número; em vez disso, concatenará:

var x = y + z;

Você precisa fazer:

var x = (y)+(z);

Você deve usar parseInt para especificar a operação nos números. Exemplo:

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

Este código soma as duas variáveis! Coloque-o em sua função

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

Está faltando a conversão de tipo durante a etapa de adição ...
var x = y + z;deve 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>

É muito simples:

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

Tente o seguinte:

<!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 tivermos dois campos de entrada, obtenha os valores dos campos de entrada e adicione-os 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);
});

Você pode fazer um pré-cheque com a expressão regular enquanto são 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;
  }

Use parseFloat-o para converter string em número, incluindo valores decimais.

 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>

Você também pode escrever: var z = x - -y; E você obtém a resposta correta.

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

Aqui vai o seu código analisando as variáveis ​​na função.

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

Responda

Uma solução alternativa, apenas compartilhando :):

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