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

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

Например, выполнение 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>

Ответы

Ответ 1

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

var x = +y + +z;

Ответ 2

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

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

Ответ 3

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

Ответ 4

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

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

alert(x + y);

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

Ответ 5

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

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

Ответ 6

Простой

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

Ответ 7

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

var x = y + z;

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

var x = (y)+(z);

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

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

Ответ 8

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

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

Ответ 9

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

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

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

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

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

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

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

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

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

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

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

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

Ответ 10

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

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

Ответ 11

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

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

Ответ 12

Вам не хватает преобразования типа во время шага добавления...
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>

Ответ 13

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

Ответ 14

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

Ответ 15

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

Ответ 16

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

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

Ответ 17

Вот ваш код, анализируя переменные в функции.

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

Ответ

Enter image description here

Ответ 18

Используйте 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>

Ответ 19

Вы также можете написать: 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>

Ответ 20

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

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