Javascript ile butona fonksiyon tanımlama

Bu yazıda butonlar üzerinde fonksiyon tanımlayıp artırma azaltma işlemlerini gerçekleştireceğiz.

       <button class="btn btn-danger product-decrement">-</button>
       <input class="product-qty" type="text" min="1" max="100" value="1" />
       <button class="btn btn-success product-increment">+</button>

Butonlarımıza gerekli olan class atamalarımızı gerçekleştiriyoruz. Class özelliklerini javascript ile müdahelede bulunurken kullanacağız. Şimdi de javascript kodlarımıza bakalım.

 $(document).ready(function(){
  
       $('.product-decrement').on('click',function(){
                   //input değişkeni ilen class özelliği product-qty olan elementin verisini çekelim.
                   let input=$(this).siblings('.product-qty');
                   
                   //gelen veriyi integer türüne çevirelim ve 1 azaltalım
                   let quantity=parseInt(input.val())-1;

                   //elementimizin değerini 1 artırdığımız veriye eşitleyelim.
                   input.val(quantity);
            })

       $('.product-increment').on('click',function(){
                   //input değişkeni ilen class özelliği product-qty olan elementin verisini çekelim.
                   let input=$(this).siblings('.product-qty');
                   
                   //gelen veriyi integer türüne çevirelim ve 1 artıralım
                   let quantity=parseInt(input.val())+1;

                   //elementimizin değerini 1 artırdığımız veriye eşitleyelim.
                   input.val(quantity);
            })

});

Bu şekild html içinde tanımladığımız buton ve inputlarımıza jquery ile müdahalelerde bulunabiliriz.