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

Merhaba Arkadaşlar,
Bu makalede 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.Alışveriş yaparken alacağımız ürünleri sepete atarken ürünün kaç adet olacağını belirttiğimiz kısmı yapıyor olacağız.Uygulama üzerinde daha anlaşılır olacaktır.Kodlarımıza geçelim.

Html kodlarımız;

Dikkat : İconlar için fontawesome versiyon 5.6.1’i sayfamıza dahil ediyoruz.

Css kodlarımız;

Jquery kodlarımız;

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

► Metin kutusunun değerine ilk olarak 1 veriyoruz ve değerin elle değiştirilmemesi için readonly attribute’unu yazıyoruz.Böylece sadece butonlar ile değer değiştirilebilir.

► 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;

Şu makaleler de ilginizi çekebilir.

Animasyonlu Hamburger İcon Yapımı

Jquery ile Beğendim – Beğenmedim Uygulaması

Yeni bir makalede görüşmek üzere.

Leave a Reply

TASARIMLARINIZDA KULLANABİLECEĞİNİZ TAM 150 FARKLI RENK PALETİRenkleri Göster
+ +