Jquery ile Butona Tıklayınca Metin Kutusundaki Sayıyı Artırmak ve Azaltmak

Bu yazımızda Css ve Jquery kullanarak butonlara tıklandığında metin kutusu içerisindeki değeri arttırıp azaltmayı öğreneceğiz.

Örneğin bir ETicaret sitesi düşünelim. Sitede alışveriş yaparken alacağımız ürünleri sepete atarken ürünün kaç adet olacağını belirttiğimiz kısım bulunuyor. İşte o tarz bir uygulama yapıyor olacağız.

Uygulama üzerinde daha anlaşılır olacaktır.

Html kodları

 Önemli  İconlar için fontawesome versiyon 5.6.1’i sayfamıza dahil ediyoruz.

Css kodları

Jquery kodları

Kısaca yazdıklarımızı özetlersek;

► Metin kutusunun değerine ilk olarak 1 veriyoruz ve değerin elle değiştirilmemesi için input etiketine readonly parametresini yazıyoruz. Böylece input’un değerini sadece butonları kullanarak değiştirilebilir yapmış oluyoruz.

► Azalt butonuna tıklayınca değer 1’den büyükse değeri 1 azaltıp metin kutusuna yazdırıyoruz. Böylece değer 1’den küçük olamayacak.

► Arttır butonuna tıklayınca değer 100’den küçükse değeri 1 arttırıp metin kutusuna yazdırıyoruz. Böylece değer 100’den büyük olamayacak.

Uygulamamızın Son Hali

Şu yazılar da ilginizi çekebilir.

Animasyonlu Hamburger İcon Yapımı

Jquery ile Beğendim – Beğenmedim Uygulaması

Yeni bir yazımda görüşmek üzere.

Leave a Reply