Dodanie dwóch liczb łączy je zamiast obliczać sumę

184

Dodaję dwie liczby, ale nie otrzymuję poprawnej wartości.

Na przykład wykonanie 1 + 2zwraca 12, a nie 3

Co robię źle w tym kodzie?

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>

Rozwiń fragment kodu

javascript html okconfused
źródło

Jakiego rodzaju wartości oczekujesz na wejściu? Liczby całkowite czy dziesiętne?

Zorayr

1

Wartość wejściowa tekstu będzie ciągiem znaków, a ciągi znaków będą zawsze konkatenowane zamiast dodawania

hank

1

Dobry zapis dotyczący konwersji znajduje się w tej odpowiedzi .

akTed

1

Możliwy duplikat Jak dodać dwa ciągi, tak jakby były liczbami?

Organic Advocate

Jeśli masz <input type="number">, możesz po prostu uzyskać jego .valueAsNumberwłasność bezpośrednio.

user4642212,

343

W rzeczywistości są łańcuchami, a nie liczbami. Najłatwiejszym sposobem wygenerowania liczby z ciągu jest dodanie jej do +:

var x = +y + +z;

elclanrs
źródło

4

z ciekawości (ja nie jestem programistą JavaScript) (i myślę, że to poprawiłoby odpowiedź), co robi +przedrostek z łańcuchami?

Sebastian Mach

30

Powyższy kod jest nieco dziwaczny i dezorientuje mniej doświadczonych programistów. Kod również zawiedzie JSLint za mylące użycie „+”.

Zorayr

2

@phresnel: unary + operators

akTed

10

@AKTed: Właściwie chciałem sprowokować elklanów, żeby opisali to trochę w swojej odpowiedzi. Oczywiście nie jestem w stanie samodzielnie wyszukiwać w Google; ale poprawiłoby to (imo) jakość odpowiedzi, zwłaszcza że użycie przedrostka + do konwersji napisów jest dość rzadkie w innych językach programowania i może mylić początkujących. (jednakże dzięki za udostępnienie linku)

Sebastian Mach

2

Odradzałbym każdemu korzystanie z tego skrótu. Wiem, że parsowanie łańcucha na liczbę wymaga więcej kodu, ale przynajmniej kod wyraźnie odpowiada intencji.

Si Kelly,

130

Po prostu używam Number():

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

Gerard
źródło

2

Popełniłem ten błąd, który zawsze się kończy: var k += Number(i)

John Phelps

Przydatne, dzięki

Prasad Patel,

29

Musisz użyć parseInt()metody javaScript, aby zamienić ciągi znaków z powrotem na liczby. W tej chwili są to łańcuchy, więc dodanie dwóch łańcuchów łączy je, dlatego otrzymujesz „12”.

mitim
źródło

1

Nie jestem pewien, czy parseInt()jest to najlepsza opcja, biorąc pod uwagę, że funkcja PO dodaje dwie „liczby” wprowadzone przez użytkownika, a nie dwie „liczby całkowite”.

nnnnnn

2

@nnnnnn Myślę, że można to łatwo zmienić, parseFloatjeśli PO dostarczy więcej informacji.

Yoshi

1

@Yoshi - Tak, tak, może, ale biorąc pod uwagę, że odpowiedź tak naprawdę nie mówi nigdzie, która parseInt()zwraca tylko liczby całkowite i nie wyjaśnia żadnych parseInt()„dziwactw” - które mogą stanowić problem z danymi wprowadzonymi przez użytkownika - I myślałem, że warto wspomnieć. (Właściwie to nie głosowałem ani nic.)

nnnnnn

Tak, założyłem, że dane wejściowe będą liczbami całkowitymi, ponieważ podają przykład 1 + 2, ale masz rację - parseFloat () może być lepszy, jeśli są tylko dowolnymi „liczbami”.

mitim

22

Użyj parseInt (...), ale upewnij się, że podałeś wartość radix; w przeciwnym razie napotkasz kilka błędów (jeśli ciąg zaczyna się od „0”, podstawa to ósemka / 8 itd.).

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

alert(x + y);

Mam nadzieję że to pomoże!

Zorayr
źródło

5

Nie jestem pewien, czy parseInt()jest to najlepsza opcja, biorąc pod uwagę, że funkcja PO dodaje dwie „liczby” wprowadzone przez użytkownika, a nie dwie „liczby całkowite”.

nnnnnn

1

Chyba że oczekuje wartości zmiennoprzecinkowych, myślę, że stosowanie tego podejścia nadal działa świetnie.

Zorayr

1

To już nie jest problem w ES6. Podstawę można bezpiecznie pominąć. parseInt("012")działa dobrze, zwracając 12. Oczywiście nadal musisz uważać na rzeczy takie jak [1,2].map(parseInt).

6

Wystarczy dodać prostą metodę rzutowania, gdy dane wejściowe są pobierane w tekście. Użyj następujących opcji:

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

Vibhav Shreshth
źródło

6

Poniższe informacje mogą być przydatne ogólnie.

Po pierwsze, pola formularza HTML są ograniczone do tekstu . Dotyczy to zwłaszcza pól tekstowych, nawet jeśli zadbałeś o to, aby wartość wyglądała jak liczba.
Po drugie, JavaScript, lepiej lub gorzej, przeciążył +operatora dwoma znaczeniami: dodaje liczby i łączy ciągi znaków. Preferuje konkatenację, więc nawet wyrażenie takie 3+'4'będzie traktowane jako konkatenacja.
Po trzecie, JavaScript będzie próbował dynamicznie zmieniać typy, jeśli będzie to możliwe i jeśli zajdzie taka potrzeba. Na przykład '2'*'3'zmieni oba typy na liczby, ponieważ nie można pomnożyć ciągów. Jeśli jeden z nich jest niezgodny, otrzymasz NaN: Nie liczba.

Twój problem występuje, ponieważ dane pochodzące z formularza są traktowane jako ciąg znaków, a + dlatego też zostaną połączone, a nie dodane.

Podczas odczytywania rzekomo numerycznych danych z formularza należy zawsze przepychać je przez parseInt()lubparseFloat() , w zależności od tego, czy chcesz liczbę całkowitą czy dziesiętną.

Zauważ, że żadna funkcja naprawdę nie konwertuje ciągu na liczbę. Zamiast tego będzie analizować ciąg od lewej do prawej, aż dojdzie do nieprawidłowego znaku numerycznego lub do końca i przekształci to, co zostało zaakceptowane. W przypadkuparseFloat , który obejmuje jeden przecinek dziesiętny, ale nie dwa.

Wszystko po poprawnym numerze jest po prostu ignorowane. Zawodzą, jeśli ciąg nie zaczyna się nawet od liczby. Wtedy dostaniesz NaN.

Dobra technika ogólnego zastosowania dla liczb z formularzy jest mniej więcej taka:

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

Jeśli jesteś przygotowany na połączenie niepoprawnego ciągu do 0, możesz użyć:

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

Manngo
źródło

5

Prosty

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

Murtaza Khursheed Hussain
źródło

4

To nie sumuje liczby; zamiast tego połączy to:

var x = y + z;

Musisz zrobić:

var x = (y)+(z);

Musisz użyć parseInt, aby określić operację na liczbach. Przykład:

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

Pushp Singh
źródło

To powinna być poprawna odpowiedź, additiona subtractionnie zaakceptowana.

MR_AMDEV

3

Ten kod sumuje obie zmienne! Umieść to w swojej funkcji

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

taha
źródło

1

Brakuje konwersji typu podczas kroku dodawania ...
var x = y + z;powinno być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>

Sharjeel
źródło

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>

Ahmad Ajaj
źródło

3

Dodaj wyjaśnienie wraz z odpowiedzią, w jaki sposób ta odpowiedź pomaga OP w rozwiązaniu bieżącego problemu

ρяσсρєя K

1

To jest bardzo proste:

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

Peter Mortensen
źródło

1

Spróbuj tego:

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

Mohammed Ebrahim
źródło

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>

Lakszmi
źródło

3

Witamy w SO! Czy możesz wyjaśnić coś więcej? Twoja odpowiedź to tylko kod, więc może działać, ale pytający (lub inni odwiedzający!) Mogą nie zrozumieć, dlaczego to działa.

Chilion

1

Jeśli mamy dwa pola wejściowe, pobierz wartości z pól wejściowych, a następnie dodaj je za pomocą 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);
});

Asad Ali
źródło

0

Możesz wykonać wstępne sprawdzenie za pomocą wyrażenia regularnego, gdy są one liczbami jak

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

Baran
źródło

Zamiast wyrażeń regularnych możesz po prostu użyć parseXX i sprawdzić zwrot NaN.

motek

Sprawdzanie poprawności danych wprowadzonych przez użytkownika jest zawsze dobrym planem, ale nadal trzeba przekonwertować ciągi wejściowe na postać liczbową, zanim będzie można wykonać dodawanie liczbowe.

nnnnnn

0

Użyj parseFloatgo, aby przekonwertować ciąg na liczbę, w tym wartości dziesiętne.

 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>

Poorna Rao
źródło

0

Możesz także napisać: var z = x - -y; I otrzymujesz poprawną odpowiedź.

<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
źródło

0

Oto twój kod, analizując zmienne w funkcji.

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

Odpowiedź

Manoj Krishna
źródło

-2

Alternatywne rozwiązanie, po prostu udostępniam :):

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

3201772
źródło

Nie jest to miłe jak użycie wtyczki arytmetycznej jQuery , ale mi się podoba.

Paul Draper

Dodanie dwóch liczb łączy je zamiast obliczać sumę

Odpowiedzi: