Добавление двух чисел объединяет их вместо расчета суммы

Я добавляю два числа, но я не получаю правильное значение.

Например, выполнение 1 + 2возвращает 12, а не 3

Что я делаю не так в этом коде?

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>

На самом деле это строки, а не числа. Самый простой способ получить число из строки - добавить к нему +:

var x = +y + +z;

Я просто использую Number():

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

Вам нужно использовать parseInt()метод javaScript, чтобы превратить строки обратно в числа. Прямо сейчас они являются строками, поэтому добавление двух строк объединяет их, поэтому вы получаете «12».

Используйте parseInt (...), но убедитесь, что вы указали значение radix; в противном случае вы столкнетесь с несколькими ошибками (если строка начинается с «0», основание будет восьмеричным / 8 и т. д.).

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

alert(x + y);

Надеюсь это поможет!

Просто добавьте простой метод приведения типов, поскольку ввод берется в текст. Используйте следующее:

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

Следующее может быть полезно в общих чертах.

• Во-первых, поля формы HTML ограничены текстом . Это особенно относится к текстовым полям, даже если вы приложили все усилия, чтобы значение выглядело как число.

• Во-вторых, JavaScript, к лучшему или к худшему, перегружал +оператора двумя значениями: он добавляет числа и объединяет строки. У него есть предпочтение для конкатенации, поэтому даже выражение like 3+'4'будет рассматриваться как конкатенация.

• В-третьих, JavaScript будет пытаться динамически изменять типы, если это возможно, и при необходимости. Например '2'*'3', оба типа будут заменены числами, поскольку вы не можете умножать строки. Если один из них несовместим, вы получите NaN, а не номер.

Ваша проблема возникает из-за того, что данные, поступающие из формы, рассматриваются как строка, а + поэтому они будут объединяться, а не добавляться.

Читая предположительно числовые данные из формы, вы всегда должны проталкивать их parseInt()илиparseFloat() , в зависимости от того, хотите ли вы целое или десятичное число.

Обратите внимание, что ни одна из функций действительно не преобразует строку в число. Вместо этого он будет анализировать строку слева направо, пока не достигнет недопустимого числового символа или до конца, и преобразует то, что было принято. В случаеparseFloat , это включает в себя один десятичный знак, но не два.

Все, что находится после действительного номера, просто игнорируется. Они терпят неудачу, если строка даже не начинается как число. Тогда вы получите NaN.

Хорошая техника общего назначения для чисел из форм выглядит примерно так:

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

Если вы готовы объединить недопустимую строку в 0, вы можете использовать:

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

просто

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

Это не будет суммировать число; вместо этого это объединит это:

var x = y + z;

Вам нужно сделать:

var x = (y)+(z);

Вы должны использовать parseInt, чтобы указать операцию над числами. Пример:

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

Этот код суммирует обе переменные! Поместите это в свою функцию

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

Вы пропускаете преобразование типов на этапе добавления ...
var x = y + z;должно бытьvar 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>

Это очень просто:

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

Попробуй это:

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

Если у нас есть два поля ввода, тогда получите значения из полей ввода, а затем добавьте их с помощью 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);
});

Вы можете выполнить предварительную проверку с помощью регулярного выражения, если они числа как

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

Используйте 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 z = x - -y; И вы получите правильный ответ.

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

Здесь идет ваш код путем анализа переменных в функции.

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

Ответ

Альтернативное решение, просто поделиться :)

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