您需要使用javaScript的parseInt()方法将字符串转换回数字。现在它们是字符串，所以添加两个字符串将它们连接起来，这就是为什么你得到“12”。

使用parseFloat将字符串转换为包含十进制值的数字。

 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>

这段代码对两个变量求和!把它代入函数

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

以下内容在一般情况下可能有用。

First, HTML form fields are limited to text. That applies especially to text boxes, even if you have taken pains to ensure that the value looks like a number. Second, JavaScript, for better or worse, has overloaded the + operator with two meanings: it adds numbers, and it concatenates strings. It has a preference for concatenation, so even an expression like 3+'4' will be treated as concatenation. Third, JavaScript will attempt to change types dynamically if it can, and if it needs to. For example '2'*'3' will change both types to numbers, since you can’t multiply strings. If one of them is incompatible, you will get NaN, Not a Number.

出现问题的原因是来自表单的数据被视为字符串，因此+将连接而不是添加。

当从表单中读取应该是数值的数据时，您应该始终将其推入parseInt()或parseFloat()，这取决于您想要的是整数还是小数。

注意，这两个函数都没有真正地将字符串转换为数字。相反，它将从左到右解析字符串，直到它得到一个无效的数字字符或直到结尾，并转换已接受的内容。在parseFloat的情况下，它包括一个小数点，但不包括两个。

在有效数字之后的任何内容都将被忽略。如果字符串一开始不是数字，它们都会失败。然后你会得到NaN。

从表单中获取数字的一个好的通用技术是这样的:

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

如果你准备将一个无效字符串合并为0，你可以使用:

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

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

你可以用正则表达式做一个预检查，不管它们是不是数字

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