jQuery Sayaç Kullanarak Arttırma ve Eksiltme Örneği

sdkbyrm

olwα.ɴeт
Üyelik Tarihi
23 Aralık 2020
Mesajlar
813
Beğeniler
1
Puanı
3
Ticaret: 0 / 0 / 0
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:


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>
Ekran Çıktısı:

 
Üst Alt