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>

Aşağıdaki yazılarımızı da inceleyebilirsiniz

JavaScript ile CSS kodlarını Yönlendirme
JavaScript ile Zemin Rengini Değiştirme
JavaScript ile Metin Kutusu değerini artırmak ve azaltmak
JavaScript ile Form Kontrolü
JavaScript ile Döngüler
JavaScript ile Fonksiyon İşlemleri
JavaScript ile Harf ve Rakam Kontrolü
JavaScript ile Basit Hesaplatma İşlemleri
JavaScript ile Ortalama ve Harf Notu Hesaplama
JavaScript ile Twitter benzeri karakter kontrolü
JavaScript ile Yuvarlatma Hatası nasıl düzeltilir?
JavaScript Luhn Algoritması ile Kredi Kartı Doğrulama

Mutlu kodlamalar,
Oğuzhan TAŞ
 
Bookmark and Share
Dil Değiştir(Change Language)
Kategoriler
Kütüphane Programı
En çok Okunan 18 Makale