Menambahkan dua angka menyatukan mereka alih-alih menghitung jumlahnya

184

Saya menambahkan dua angka, tetapi saya tidak mendapatkan nilai yang benar.

Misalnya, melakukan 1 + 2 pengembalian 12 dan bukan 3

Apa yang saya lakukan salah dalam kode ini?

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>

okconfused
sumber
Jenis nilai apa yang Anda harapkan sebagai input? Bilangan bulat atau desimal?
Zorayr
1
Nilai input teks akan berupa string dan string akan selalu digabungkan alih-alih penambahan
terima kasih
1
Tulisan yang bagus tentang konversi ada di Jawaban ini .
akTed
Jika Anda punya <input type="number">, Anda bisa langsung mendapatkan .valueAsNumberpropertinya.
user4642212

Jawaban:

343

Mereka sebenarnya adalah string, bukan angka. Cara termudah untuk menghasilkan angka dari string adalah dengan mengawalinya dengan +:

var x = +y + +z;
elclanrs
sumber
4
karena penasaran (saya sendiri bukan programmer JavaScript) (dan saya pikir ini akan meningkatkan jawabannya), apa yang dilakukan +-prefix dengan string?
Sebastian Mach
30
Kode di atas agak aneh dan akan membingungkan pengembang yang kurang berpengalaman. Kode juga akan gagal JSLint karena membingungkan penggunaan '+'.
Zorayr
2
@phrnelnel: operator unary +
akTed
10
@AKTed: Sebenarnya saya ingin memprovokasi elclanrs untuk menggambarkannya sedikit dalam jawabannya. Tentu saja saya tidak dapat melakukan pencarian google sendiri; tetapi itu (imo) akan meningkatkan kualitas jawaban, terutama karena menggunakan awalan + untuk konversi string sangat jarang di bahasa pemrograman lain dan mungkin membingungkan pemula. (Namun, terima kasih telah berbagi tautan)
Sebastian Mach
2
Saya akan mencegah siapa pun menggunakan pintasan ini. Saya tahu bahwa sebenarnya mem-parsing string ke dalam angka memerlukan lebih banyak kode tetapi setidaknya kode tersebut jelas sesuai dengan niat.
Si Kelly
130

Saya hanya menggunakan Number():

var i=2;  
var j=3;  
var k = Number(i) + Number(j); // 5  
Gerard
sumber
2
Saya terus membuat kesalahan ini yang selalu berbunyi: var k += Number(i)
John Phelps
Berguna, Terima Kasih
Prasad Patel
29

Anda perlu menggunakan parseInt()metode javaScript untuk mengubah string kembali menjadi angka. Saat ini mereka adalah string sehingga menambahkan dua string merangkai mereka, itulah sebabnya Anda mendapatkan "12".

mitim
sumber
1
Saya tidak yakin parseInt()adalah pilihan terbaik di sini mengingat bahwa fungsi OP adalah menambahkan dua "angka" yang dimasukkan pengguna, bukan dua "bilangan bulat".
nnnnnn
2
@nnnnnn Saya pikir, itu dapat dengan mudah diubah dengan parseFloatOP memberikan input lebih banyak.
Yoshi
1
@Yoshi - Ya, ya itu bisa, tetapi mengingat bahwa jawabannya tidak benar-benar mengatakan di mana saja yang parseInt()hanya mengembalikan bilangan bulat, dan tidak menjelaskan parseInt()"kebiasaan" apa pun - yang bisa menjadi masalah dengan data yang dimasukkan pengguna - I pikir itu layak disebut. (Saya tidak benar-benar downvote atau apa pun.)
nnnnnn
Ya, saya telah membuat asumsi bahwa input akan berupa bilangan bulat karena mereka memberikan contoh 1 + 2, tetapi Anda benar - parseFloat () mungkin lebih baik jika mereka hanya berupa 'angka'.
mitim
22

Gunakan parseInt (...) tetapi pastikan Anda menentukan nilai radix; jika tidak, Anda akan mengalami beberapa bug (jika string dimulai dengan "0", radix adalah oktal / 8 dll.).

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

alert(x + y);

Semoga ini membantu!

Zorayr
sumber
5
Saya tidak yakin parseInt()adalah pilihan terbaik di sini mengingat bahwa fungsi OP adalah menambahkan dua "angka" yang dimasukkan pengguna, bukan dua "bilangan bulat".
nnnnnn
1
Kecuali dia mengharapkan nilai floating point, saya pikir menggunakan pendekatan ini masih berfungsi dengan baik.
Zorayr
1
Ini bukan lagi masalah di ES6. Radix mungkin dihilangkan dengan aman. parseInt("012")berfungsi dengan baik, kembali 12. Tentu saja, Anda masih harus berhati-hati dengan hal-hal seperti [1,2].map(parseInt).
6

Cukup tambahkan metode tipe casting sederhana karena input diambil dalam teks. Gunakan yang berikut ini:

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

Berikut ini mungkin berguna secara umum.

  • Pertama, bidang formulir HTML terbatas pada teks . Itu berlaku terutama untuk kotak teks, bahkan jika Anda telah bersusah payah untuk memastikan bahwa nilainya terlihat seperti angka.

  • Kedua, JavaScript, baik atau buruk, telah membebani +operator dengan dua makna: itu menambah angka, dan itu merangkai string. Ia memiliki preferensi untuk penggabungan, jadi bahkan ekspresi seperti 3+'4'akan diperlakukan sebagai penggabungan.

  • Ketiga, JavaScript akan berusaha mengubah tipe secara dinamis jika bisa, dan jika perlu. Misalnya '2'*'3'akan mengubah kedua jenis menjadi angka, karena Anda tidak dapat mengalikan string. Jika salah satunya tidak kompatibel, Anda akan mendapatkan NaN, Bukan Angka.

Masalah Anda terjadi karena data yang berasal dari formulir dianggap sebagai string, dan +karena itu kehendak akan disatukan daripada ditambahkan.

Saat membaca data numerik yang seharusnya dari formulir, Anda harus selalu mendorongnya melalui parseInt()atau parseFloat(), tergantung pada apakah Anda ingin bilangan bulat atau desimal.

Perhatikan bahwa tidak ada fungsi yang benar-benar mengubah string menjadi angka. Sebagai gantinya, itu akan mengurai string dari kiri ke kanan hingga sampai ke karakter numerik yang tidak valid atau ke akhir dan mengonversi apa yang telah diterima. Dalam kasusparseFloat , itu termasuk satu titik desimal, tetapi bukan dua.

Apa pun setelah nomor yang valid diabaikan saja. Mereka gagal jika string bahkan tidak memulai sebagai angka. Maka Anda akan mendapatkan NaN.

Teknik tujuan umum yang baik untuk angka dari formulir adalah sesuatu seperti ini:

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

Jika Anda siap untuk menyatukan string yang tidak valid ke 0, Anda dapat menggunakan:

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

Sederhana

var result = parseInt("1") + parseInt("2");
console.log(result ); // Outputs 3
Murtaza Khursheed Hussain
sumber
4

Ini tidak akan meringkas jumlahnya; melainkan akan menggabungkannya:

var x = y + z;

Yang perlu Anda lakukan:

var x = (y)+(z);

Anda harus menggunakan parseInt untuk menentukan operasi pada angka. Contoh:

var x = parseInt(y) + parseInt(z); [final soulution, as everything us]
Pushp Singh
sumber
Ini harus menjadi jawaban yang benar additiondan subtractionbukan yang diterima.
MR_AMDEV
3

Kode ini menjumlahkan kedua variabel! Masukkan ke dalam fungsi Anda

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

Anda kehilangan konversi tipe selama langkah penambahan ...
var x = y + z;seharusnyavar 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
sumber
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
sumber
3
Tambahkan beberapa penjelasan dengan jawaban untuk bagaimana jawaban ini membantu OP dalam memperbaiki masalah saat ini
ρяσѕρєя K
1

Ini sangat sederhana:

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

Coba ini:

<!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
sumber
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
sumber
3
Selamat datang di SO! Bisakah Anda jelaskan sedikit lebih banyak? Jawaban Anda hanya kode, jadi mungkin berhasil, tetapi si penanya (atau pengunjung lain!) Mungkin tidak mengerti mengapa ia bekerja.
Chilion
1

Jika kita memiliki dua bidang input maka dapatkan nilai dari bidang input, lalu tambahkan menggunakan 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
sumber
0

Anda dapat melakukan pemeriksaan awal dengan ekspresi reguler ketika angka-angka itu seperti

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;
  }
Ram
sumber
Alih-alih ekspresi reguler Anda bisa menggunakan parseXX dan memeriksa kembali NaN.
terima kasih
Memvalidasi data yang dimasukkan pengguna selalu merupakan paket yang bagus, tetapi Anda masih perlu mengonversi string input ke bentuk angka sebelum Anda dapat melakukan penambahan angka.
nnnnnn
0

Gunakan parseFloatitu akan mengkonversi string ke angka termasuk nilai desimal.

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

Anda juga dapat menulis: var z = x - -y; Dan Anda mendapatkan jawaban yang benar.

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

Ini dia kode Anda dengan mem-parsing variabel dalam fungsi.

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

Menjawab

Masukkan deskripsi gambar di sini

Manoj Krishna
sumber
-2

Solusi alternatif, cukup berbagi :):

var result=eval(num1)+eval(num2);
user3201772
sumber
Tidak sebagus menggunakan plugin aritmatika jQuery , tapi saya menyukainya.
Paul Draper