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>
javascript
html
okconfused
sumber
sumber
<input type="number">
, Anda bisa langsung mendapatkan.valueAsNumber
propertinya.Jawaban:
Mereka sebenarnya adalah string, bukan angka. Cara termudah untuk menghasilkan angka dari string adalah dengan mengawalinya dengan
+
:sumber
+
-prefix dengan string?Saya hanya menggunakan
Number()
:sumber
var k += Number(i)
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".sumber
parseInt()
adalah pilihan terbaik di sini mengingat bahwa fungsi OP adalah menambahkan dua "angka" yang dimasukkan pengguna, bukan dua "bilangan bulat".parseFloat
OP memberikan input lebih banyak.parseInt()
hanya mengembalikan bilangan bulat, dan tidak menjelaskanparseInt()
"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.)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.).
Semoga ini membantu!
sumber
parseInt()
adalah pilihan terbaik di sini mengingat bahwa fungsi OP adalah menambahkan dua "angka" yang dimasukkan pengguna, bukan dua "bilangan bulat".parseInt("012")
berfungsi dengan baik, kembali 12. Tentu saja, Anda masih harus berhati-hati dengan hal-hal seperti[1,2].map(parseInt)
.Cukup tambahkan metode tipe casting sederhana karena input diambil dalam teks. Gunakan yang berikut ini:
sumber
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 seperti3+'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 mendapatkanNaN
, 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()
atauparseFloat()
, 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 kasus
parseFloat
, 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:
Jika Anda siap untuk menyatukan string yang tidak valid ke 0, Anda dapat menggunakan:
sumber
Sederhana
sumber
Ini tidak akan meringkas jumlahnya; melainkan akan menggabungkannya:
Yang perlu Anda lakukan:
Anda harus menggunakan parseInt untuk menentukan operasi pada angka. Contoh:
sumber
addition
dansubtraction
bukan yang diterima.Kode ini menjumlahkan kedua variabel! Masukkan ke dalam fungsi Anda
sumber
Anda kehilangan konversi tipe selama langkah penambahan ...
var x = y + z;
seharusnyavar x = parseInt(y) + parseInt(z);
sumber
sumber
Ini sangat sederhana:
sumber
Coba ini:
sumber
sumber
Jika kita memiliki dua bidang input maka dapatkan nilai dari bidang input, lalu tambahkan menggunakan JavaScript.
sumber
Anda dapat melakukan pemeriksaan awal dengan ekspresi reguler ketika angka-angka itu seperti
sumber
Gunakan
parseFloat
itu akan mengkonversi string ke angka termasuk nilai desimal.sumber
Anda juga dapat menulis: var z = x - -y; Dan Anda mendapatkan jawaban yang benar.
sumber
Ini dia kode Anda dengan mem-parsing variabel dalam fungsi.
Menjawab
sumber
Solusi alternatif, cukup berbagi :):
sumber