Bu örneğimizde jQuery ile sayac isimli bir değişken kullanarak sayfamıza eklediğimiz iki button ile bu sayacın arttırılıp azaltılmasını sağlayan ve bunu da ekrana yansıtan bir sayfa oluşturacağız. “Arttır” isimli button sayacın bir arttırılmasını, “Azalt” isimli button ise sayacın bir eksiltilmesini sağlayacak. Örneğe ait kodları ve ekran çıktısını aşağıda inceleyebilirsiniz.
index.html sayfamıza ait kodlar:
Ekran Çıktısı:
index.html sayfamıza ait kodlar:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script> <style> #kutu{ font-size: 45px; color: red; } </style> </head> <body> <div id="kutu"></div> <input type="button" id="btn1" value="Arttır"> <input type="button" id="btn2" value="Azalt"> <script> $(document).ready(function(){ var sayac=0; $("#kutu").html(sayac); $("#btn1").on("click",function(){ sayac++; $("#kutu").html(sayac); }); $("#btn2").on("click",function(){ sayac--; $("#kutu").html(sayac); }); }); </script> </body> </html> |