Додавання двох чисел об'єднує їх замість обчислення суми

184

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

Наприклад, робити 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>

Розгорніть фрагмент

javascript html

— окконфуз
джерело

Який тип значень ви очікуєте як вхідні дані? Цілі чи десяткові знаки?

— Зорайр

1

Значенням для введення тексту буде рядок, а рядки завжди будуть об'єднані замість додавання

— hank

1

Хороший опис конвертації є у цій відповіді .

— akTed

1

Можливий дублікат Як додати два рядки так, ніби вони були числами?

— Органічний адвокат

Якщо у вас є <input type="number">, ви можете просто отримати його .valueAsNumberмайно безпосередньо.

— user4642212

343

Вони насправді є рядками, а не числами. Найпростіший спосіб отримати число з рядка - додати його до +:

var x = +y + +z;

— еклани
джерело

4

з цікавості (я не програміст JavaScript) (і я думаю, що це поліпшить відповідь), що робить +-prefix із рядками?

— Себастьян Мах

30

Наведений вище код трохи химерний і заплутає менш досвідчених розробників. Код також не зможе JSLint за заплутаність використання '+'.

— Зорайр

2

@phresnel: Unary + оператори

— akTed

10

@AKTed: Насправді я хотів спровокувати елкланів, щоб трохи описати це у своїй відповіді. Звичайно, я не в змозі самостійно здійснити пошук Google; але це (imo) поліпшить якість відповіді, тим більше, що використання префікса + для перетворення рядків є досить рідкісним для інших мов програмування і може заплутати новиків. (проте, дякую за те, що поділилися посиланням)

— Себастьян Мах

2

Я б заважав комусь використовувати цей ярлик. Я знаю, що насправді для розбору рядка в число потрібно більше коду, але принаймні код чітко відповідає наміру.

— Сі Келлі

130

Я просто використовую Number():

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

— Ґерард
джерело

2

Я продовжував робити цю помилку, яка завжди підтверджується: var k += Number(i)

— Джон Фелпс,

Корисно, спасибі

— Prasad Patel

29

Щоб parseInt()повернути рядки в числа, потрібно використовувати метод javaScript . Зараз вони є рядками, тому додавання двох рядків об'єднує їх, тому ви отримуєте "12".

— mitim
джерело

1

Я не впевнений parseInt(), що тут найкращий варіант, враховуючи, що функція ОП - це додавання двох «цифр», а не двох «цілих чисел».

— nnnnnn

2

@nnnnnn Я думаю, що це можна легко змінити, parseFloatякщо ОП надасть більше вкладень .

— Йоші

1

@Yoshi - Так, так, але, враховуючи, що відповідь насправді не говорить ніде, що parseInt()повертає лише цілі числа, і не пояснює жодних parseInt()"химерностей" - що може бути проблемою із введеними користувачем даними - I думав, що варто згадати. (Я насправді не звертався ні до чого, ні про що.)

— nnnnnn

Так, я зробив припущення, що вхід буде цілим числом, оскільки вони дають приклад 1 + 2, але ви праві - parseFloat () може бути кращим, якщо вони є просто будь-якими «числами».

— mitim

22

Використовуйте parseInt (...), але переконайтесь, що ви вказали значення радіації; в іншому випадку ви зіткнетеся з декількома помилками (якщо рядок починається з "0", радіус - восьмеричний / 8 тощо).

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

alert(x + y);

Сподіваюся, це допомагає!

— Зорайр
джерело

5

Я не впевнений parseInt(), що тут найкращий варіант, враховуючи, що функція ОП - це додавання двох «цифр», а не двох «цілих чисел».

— nnnnnn

1

Якщо він не очікує значень з плаваючою комою, я думаю, що використання цього підходу все ще чудово працює.

— Зорайр

1

Це більше не є проблемою в ES6. Радікс може бути безпечно опущений. parseInt("012")працює чудово, повертаючи 12. Звичайно, вам все одно слід бути обережними з такими речами [1,2].map(parseInt).

6

Просто додайте простий метод кастингу типу, оскільки вхід береться в тексті. Використовуйте наступне:

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

— Vibhav Shreshth
джерело

6

Наступне може бути корисним у загальних рисах.

По-перше, поля форм HTML обмежені текстом . Особливо це стосується текстових полів, навіть якщо ви відчули, що значення виглядає як число.
По-друге, JavaScript в кращу чи гіршу сторону перевантажив +оператора двома значеннями: додає числа, і він об'єднує рядки. Він має перевагу конкатенації, тому навіть вираз на зразок 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;

— Манго
джерело

5

Простий

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

— Муртаза Хурсід Хуссейн
джерело

4

Це не підсумовує число; замість цього він об'єднає його:

var x = y + z;

Вам потрібно зробити:

var x = (y)+(z);

Ви повинні використовувати parseInt для того, щоб вказати операцію на числах. Приклад:

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

— Пушп Сінгх
джерело

Це має бути правильна відповідь, additionа subtractionне прийнята.

— MR_AMDEV

3

Цей код підсумовує обидві змінні! Покладіть його на свою функцію

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

— таха
джерело

1

Під час кроку додавання у вас відсутнє перетворення типу ...
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>

— шаржель
джерело

1

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

— Ахмад Аджай
джерело

3

Додайте пояснення з відповіддю, як ця відповідь допоможе ОП у вирішенні поточного питання

— ρяσѕρєя K

1

Це дуже просто:

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

— Пітер Мортенсен
джерело

1

Спробуйте це:

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

— Мухаммед Єбрагім
джерело

1

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

— Лакшмі
джерело

3

Ласкаво просимо до SO! Чи можете ви поясніть ще трохи? Ваша відповідь - це лише код, тому він може працювати, але запитуючий (чи інші відвідувачі!) Можуть не зрозуміти, чому це працює.

— Чиліон

1

Якщо у нас є два поля введення, то отримайте значення з полів введення, а потім додайте їх за допомогою 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);
});

— Асад Алі
джерело

0

Ви можете зробити попередню перевірку з регулярним виразом, коли б вони не були числами

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

— ОЗП
джерело

Замість регулярних виразів ви можете просто використовувати parseXX і перевірити наявність NaN.

— ханк

Перевірка даних, введених користувачем, завжди є добрим планом, але вам все ж потрібно перетворити вхідні рядки в числову форму, перш ніж робити числове додавання.

— nnnnnn

0

Використовуючи 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>

— Бідна Рао
джерело

0

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

— PA010
джерело

0

Тут йде ваш код шляхом аналізу змінних у функції.

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

Відповідь

— Маной Кришна
джерело

-2

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

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

— user3201772
джерело

Не приємно, як використовувати арифметичний плагін jQuery , але мені це подобається.

— Пол Дрейпер