İki sayı eklemek toplamı hesaplamak yerine bunları birleştirir

185

İki sayı ekliyorum ama doğru bir değer elde edemiyorum.

Örneğin, 1 + 23 değil , 12 döndürür

Bu kodda neyi yanlış yapıyorum?

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>

Snippet'i genişlet

javascript html

— okconfused
kaynak

Girdi olarak ne tür değerler bekliyorsunuz? Tamsayılar veya ondalıklar mı?

— Zorayr

1

Bir metin giriş değeri dize olur ve dize her zaman ekleme yerine birleştirilir

— hank

1

Dönüştürmede iyi bir yazı bu cevabın içinde .

— akTed

1

Olası yinelenen onlar numaralar sanki How iki dizeyi eklenir?

— Organik Avukat

Eğer varsa, doğrudan mülkünü <input type="number">alabilirsiniz .valueAsNumber.

— user4642212

343

Bunlar aslında dizgiler, sayı değil. Bir dizeden sayı üretmenin en kolay yolu, onu bir dizenin başına eklemektir +:

var x = +y + +z;

— elclanrs
kaynak

4

(kendimi bir JavaScript programcısı değil) (ve bunun cevabı geliştireceğini düşünüyorum), +-prefix dizelerle ne yapıyor ?

— Sebastian Mach

30

Yukarıdaki kod biraz tuhaftır ve daha az deneyimli geliştiricileri karıştırır. Kod ayrıca '+' karmaşık kullanımı nedeniyle JSLint'te başarısız olur.

— Zorayr

2

@phresnel: unary + operatörleri

— akTed

10

@AKTed: Aslında elclanrs'ı cevabı içinde biraz tanımlaması için kışkırtmak istedim . Tabii ki google aramasını kendim yapamıyorum; ancak (imo) cevabın kalitesini artıracaktır, özellikle dize dönüşümü için prefix- + kullanımı diğer programlama dillerinde oldukça nadirdir ve yenileri karıştırabilir. (ancak bağlantıyı paylaştığınız için teşekkürler)

— Sebastian Mach

2

Kimsenin bu kısayolu kullanmasını önermem. Aslında bir sayıya bir dize ayrıştırma daha fazla kod gerektirir ama en azından kod açıkça niyetiyle eşleştiğini biliyorum.

— Si Kelly

130

Sadece kullanıyorum Number():

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

— gerard
kaynak

2

Her zaman örtüşen bu hatayı yapmaya devam ettim:var k += Number(i)

— John Phelps

Yararlı, teşekkürler

— Prasad Patel

29

parseInt()Dizeleri sayılara dönüştürmek için javaScript yöntemini kullanmanız gerekir . Şu anda dizeler, bu yüzden iki dizeyi eklemek onları birleştirir, bu yüzden "12" elde edersiniz.

— MITIM
kaynak

1

parseInt()OP işlevi burada iki "tamsayı" değil, iki kullanıcı tarafından girilen "sayı" ekliyor göz önüne alındığında burada en iyi seçenek olduğundan emin değilim .

— nnnnnn

2

@nnnnnn Bence parseFloatOP daha fazla girdi sağlarsa bu kolayca değiştirilebilir .

— Yoshi

1

@Yoshi - Evet, evet olabilir, ancak cevabın aslında parseInt()sadece tamsayılar döndüren hiçbir yerde söylemediği ve parseInt()"girilen" herhangi bir şeyi açıklamadığı göz önüne alındığında - ki bu kullanıcı tarafından girilen verilerle ilgili bir sorun olabilir - I bahsetmeye değer olduğunu düşündüm. (Aslında hiçbir şeyi küçümsemedim.)

— nnnnnn

Evet, girdinin 1 + 2 örneği verdikleri için tamsayı olacağını varsaydım, ancak haklısınız - parseFloat () herhangi bir 'sayı' ise daha iyi olabilir.

— mitim

22

ParseInt (...) kullanın, ancak bir radix değeri belirttiğinizden emin olun; aksi takdirde birkaç hata ile karşılaşacaksınız (eğer dize "0" ile başlıyorsa, sayı tabanı sekizlik / 8 vb.).

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

alert(x + y);

Bu yardımcı olur umarım!

— Zorayr
kaynak

5

parseInt()OP işlevi burada iki "tamsayı" değil, iki kullanıcı tarafından girilen "sayı" ekliyor göz önüne alındığında burada en iyi seçenek olduğundan emin değilim .

— nnnnnn

1

Kayan nokta değerleri beklemediği sürece, bu yaklaşımı kullanmak hala harika çalışıyor.

— Zorayr

1

Bu artık ES6'da bir sorun değil. Sayı tabanı güvenli bir şekilde atlanabilir. parseInt("012")İyi çalışıyor, geri dönüyor 12. Tabii ki, yine de böyle şeylere dikkat etmelisiniz [1,2].map(parseInt).

6

Giriş metinde alındığı için basit bir döküm yöntemi eklemeniz yeterlidir. Aşağıdakileri kullanın:

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

— Titreşim Parlaklığı
kaynak

6

Aşağıdakiler genel anlamda faydalı olabilir.

İlk olarak, HTML form alanları metinle sınırlıdır . Bu, değerin bir sayı gibi görünmesini sağlamak için acı çekmiş olsanız bile, özellikle metin kutuları için geçerlidir .
İkincisi, JavaScript, daha iyi veya daha kötü için, +operatöre iki anlam yükledi : sayı ekler ve dizeleri birleştirir. Birleştirme tercihi olduğundan, benzer bir ifade bile 3+'4'birleştirme olarak ele alınacaktır.
Üçüncü olarak, JavaScript türleri varsa ve gerekiyorsa dinamik olarak değiştirmeye çalışır. Örneğin '2'*'3', dizeleri çoğaltamayacağınız için her iki türü de sayı olarak değiştirir. Bunlardan biri uyumsuzsa, NaNSayı Değil alırsınız .

Sorun, formdan gelen veriler bir dize olarak kabul edilir ve bu +nedenle eklemek yerine birleştirmek olacaktır.

Bir formdan sözde sayısal verileri okurken, bir tamsayı veya ondalık sayı isteyip istemediğinize bağlı olarak her zaman parseInt()veya parseFloat()simgesine basmalısınız.

Her iki işlevin de gerçekte bir dizeyi sayıya dönüştürmediğini unutmayın . Bunun yerine, geçersiz bir sayısal karaktere veya sonuna kadar dizeyi soldan sağa ayrıştırır ve kabul edileni dönüştürür. Durumunda parseFloat, bu bir ondalık nokta içerir, ancak iki değil.

Geçerli sayıdan sonraki her şey göz ardı edilir. Dizge sayı olarak bile başlamazsa başarısız olurlar. Sonra alacaksın NaN.

Formlardaki sayılar için iyi bir genel amaçlı teknik şöyledir:

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

Geçersiz bir dizeyi 0 ile birleştirmeye hazırsanız, şunları kullanabilirsiniz:

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

— Manngo
kaynak

5

Basit

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

— Murtaza Khursheed Hussain
kaynak

4

Bu sayıyı özetlemez; bunun yerine birleştirir:

var x = y + z;

Yapman lazım:

var x = (y)+(z);

Sayılar üzerindeki işlemi belirtmek için parseInt kullanmanız gerekir. Misal:

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

— Pushp Singh
kaynak

Bu, doğru için cevap olmalı additionve subtractiondeğil kabul kimse.

— MR_AMDEV

3

Bu kod her iki değişkeni de toplar! Fonksiyonunuza koyun

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

— taha
kaynak

1

Sen ekleme adımı sırasında tip dönüşüm eksik ...
var x = y + z;olmalı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
kaynak

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
kaynak

3

Bu cevabın OP'nin mevcut sorunu

— çözmede

1

Çok basit:

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

1

Bunu dene:

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

— Muhammed Ebrahim
kaynak

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>

— Lakshmi
kaynak

3

SO hoş geldiniz! Biraz daha açıklayabilir misiniz? Cevabınız sadece koddur, bu yüzden işe yarayabilir, ancak sorgulayan (veya diğer ziyaretçiler!) Neden çalıştığını anlamayabilir.

— Chilion

1

İki giriş alanımız varsa, değerleri giriş alanlarından alın ve ardından bunları JavaScript kullanarak ekleyin.

$('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);
});

— Esed Ali
kaynak

0

Sayıları ne olursa olsun, normal ifade ile bir ön kontrol yapabilirsiniz

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

— Veri deposu
kaynak

Normal ifadeler yerine parseXX kullanabilir ve NaN dönüşünü kontrol edebilirsiniz.

— hank

Kullanıcı tarafından girilen verilerin doğrulanması her zaman iyi bir plan olmakla birlikte, sayısal bir ekleme yapmadan önce giriş dizelerini sayısal forma dönüştürmeniz gerekir.

— nnnnnn

0

parseFloatBunu kullanın , dizeyi ondalık değerler dahil sayıya dönüştürür.

 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
kaynak

0

Ayrıca şunu da yazabilirsiniz: var z = x - -y; Ve doğru cevabı alırsınız.

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

0

İşlevdeki değişkenleri ayrıştırarak kodunuzu girebilirsiniz.

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

Cevap

— Manoj Krishna
kaynak

-2

Alternatif bir çözüm, sadece paylaşmak :):

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

— user3201772
kaynak

JQuery aritmetik eklentisini kullanmak kadar hoş değil , ama beğendim.

— Paul Draper