Konuyu Değerlendir
  • 0 Oy - 0 Ortalama
  • 1
  • 2
  • 3
  • 4
  • 5
Javascript Sayı Toplama Sorunu
#1
Javascript ile iki sayıyı toplamak için + operatörü ile işlem yaptırdığınızda istediğiniz sonuca ulaşamadığınızı görürsünüz. Programdan a + b işlemi için c sonucunu vermesini beklerken, ekranda ab sonucunu görmek can sıkıcı bir durumdur. Daha açık olması açısından 1 + 2 için 3 sonucunu beklerken bilgisayar size 12 sonucunu verir. Bu sorun Javascript'in işleme soktuğunuz sayıları, string olarak algılamasından kaynaklanmaktadır. Çoğunlukla bir form sayfasında kullanıcıdan veri alırken ortaya çıkar.

Şimdi bir örnekle bunu açıklamaya çalışalım,
Örnek programımızda kullanıcıdan iki sayı girmesini isteyeceğiz. Kullanıcı butona bastığında girilen sayıları toplatıp sonucu görüntületeceğiz.

İlk önce formu oluşturalım formumuz basitçe şu şekilde,


Kod:
<form id="toplat">
<table width="322" style="border: solid 1px #a1a1a1;font-family:Arial;font-size:13px;" cellspacing="2" cellpadding="2">
<tr>
<td>İlk Sayıyı Girin : </td>
<td width="180"><input id="ilkSayi" type="text" style="width:100%;margin:0px;padding:0px;"/></td>
</tr>
<tr>
<td>İkinci Sayıyı Girin : </td>
<td><input id="ikinciSayi" type="text" style="width:100%;margin:0px;padding:0px;"/></td>
</tr>
<tr>
<td>Sonuç : </td>
<td><span id="sonuc" style="border: solid 1px #a1a1a1;width:100%;display:block;height:20px;"></span></td>
</tr>
<tr>
<td>Javascript ile Toplama Yaptır</td>
<td><input id="toplaBtn" type="button" onclick="jsToplama()" style="width:100%;" value="Sayıları Topla"/></td>
</tr>
<table>
</form>

Bu formun kullanıclardan veri alıp toplayabilmesi için yazmamız gerekn JS kodu,

Kod:
<script type="text/javascript">
function jsToplama(){
var ilkSayi = document.getElementById("ilkSayi").value;
var ikinciSayi = document.getElementById("ikinciSayi").value;
var sonuc = ilkSayi + ikinciSayi;

document.getElementById("sonuc").innerHTML= sonuc;
}
</script>
 
Kodları tarayıcıda görüntületip forma sayıları girelim

1. Sayı için 3
2. Sayı için 4

değerlerini girip topla butonuna bastığımızda sonuç hanesinde

34 yazdığını görürüz.

Yazının başında da belirtiğimiz gibi Javascript formdan aldığı iki değeri de birer string(yazı değişkeni) olarak algıladı ve + operatörü ile string birleştirmesi yaptı.

Javascript ile toplama işlemini yapabilmemiz için öncelikli olarak kullanıcının girdiği string değişkenlerinin bir sayıya yani integer'a dönüştürülmesi gerekiyor.

Bunu yapmak için Javascriptin harika bir metodu var; "parseInt()"  Bu metod, parantezleri içine yazılan string tipindeki rakamları integer sayı tipine dönüştürür. Hemen uygulayalım.
iki değişkeni de toplarken ayrı ayrı dönüştürelim

 var sonuc = parseInt(ilkSayi) + parseInt(ikinciSayi);

kodu bu haliyle düzenlersek,

Kod:
<script type="text/javascript">
function jsToplama(){
var ilkSayi = document.getElementById("ilkSayi").value;
var ikinciSayi = document.getElementById("ikinciSayi").value;
var sonuc = parseInt(ilkSayi) + parseInt(ikinciSayi);

document.getElementById("sonuc").innerHTML= sonuc;
}

</script>

Değişiklikleri yapıp kaydettikten sonra tarayıcınızı yenilediğinizde formun toplama işlemini doğru bir şekilde yaptığını görebilirsiniz.
Bul
Alıntı


Foruma Git:


Bu konuyu görüntüleyen kullanıcı(lar): 1 Ziyaretçi