JavaScript ile Basit Alışveriş Sepeti Yapımı

Bu örneğimizde JavaScript kullanarak aşağıda görüldüğü gibi bir alışveriş sepetinin hesaplama işlemini yapacağız. Tabi burada kullandğınız web ortamı Asp.net veya PHP ile bu verileri getirdiğinizi düşünüyoruz. Genelde Session(Oturum) nesnesi içinde bir 3 boyutlu dizi oluşturarak Ürün Adı, Fiyat ve Miktar değerlerini tutup bu sayfada kullanıcının değiştirdiği miktara göre hesaplama işlemini yapacağız.  



Aşağıdaki kodları bir editöre yapıştırarak çalışmasını gözlemleyebilirsiniz. Hesapla butonuna tıklanınca hesapla() fonksiyonu tetikleniyor. Bu fonkisyona üç ürün olduğu için 3 parametresini gönderiyoruz. miktar1, miktar2 ve miktar3 ID değerlerine sahip TextBox'lar ile fiyat1, fiyat2 ve fiyat3 etiketlerine sahip textbox'lar içindeki veriler float(kayan noktalı) hale çevrilerek çarpılıyor.

function hesapla(urunAdet)
{
    toplam=0;
    for(i=1;i<=urunAdet;i++){
 
        miktar=parseFloat(document.getElementById("miktar"+i).value);
        fiyat=parseFloat(document.getElementById("fiyat"+i).value);
        tutar=miktar*fiyat;
        document.getElementById('tutar'+i).value=tutar;
        toplam+=miktar*fiyat;

 } 
 document.getElementById('geneltoplam').value=toplam;
}

Geneltoplam ID değerli metin kutusu içeriğine yapıştırılıyor. 

<html>
<head>
<meta charset="utf-8">
<script type="text/javascript">
 
//hesapla fonksiyonu
function hesapla(urunAdet)
{
    toplam=0;
    for(i=1;i<=urunAdet;i++){
        miktar=parseFloat(document.getElementById("miktar"+i).value);
        fiyat=parseFloat(document.getElementById("fiyat"+i).value);
        tutar=miktar*fiyat;
        document.getElementById('tutar'+i).value=tutar;
        toplam+=miktar*fiyat;
 } 
 document.getElementById('geneltoplam').value=toplam;
}
 
</script>
 
</head>
<body>
<table border="1" align="center">
<tr>
<td>Ürün Adı</td>
<td>Miktar</td>
<td>Fiyat</td>
<td>Tutar</td>
</tr>
<tr>
<td>Defter</td>
<td><input type="text" id="miktar1" value="1"></td>
<td><input type="text" id="fiyat1" value="200"></td>
<td><input type="text" id="tutar1" value=""></td>
</tr>
<tr>
<td>Kalem</td>
<td><input type="text" id="miktar2" value="2"></td>
<td><input type="text" id="fiyat2" value="50"></td>
<td><input type="text" id="tutar2" value=""></td>
</tr>
<tr>
<td>Silgi</td>
<td><input type="text" id="miktar3" value="2"></td>
<td><input type="text" id="fiyat3" value="250"></td>
<td><input type="text" id="tutar3" value=""></td>
</tr>
<tr>
<td align="right" colspan="3">Genel TOPLAM:</td>
<td><input type="text" readonly="true" id="geneltoplam"></td>
</tr>
<tr>
<td colspan="4" align="right"> <button onclick="hesapla(3);">Hesapla</button></td>
</tr>
 
</table>
</body>
</html>

Mutlu kodlamalar,
Oğuzhan TAŞ
 
Bookmark and Share
Dil Değiştir(Change Language)