JavaScript ile metin kutusu değerini artırmak ve azaltmak

Bu bölümde JavaScript ile bir metin kutusundaki sayısal değeri artırıp azaltacağız. Bunun için bir metin kutusu(textbox), bir artım düğmesi ve bir azaltım düğmesi yerleştirdik. artir() ve azalt() isimli iki fonksiyon yazdık. 

ilgili html dosyasını çalıştırdığınızda görüntü aşağıdaki gibi olacak, + butonuna basınca birer birer artacak, - butonuna basınca ise birer birer azalacaktır.


<html>
<head>
<script type="text/javascript">

var s =0;

function artir(){
   deger= document.getElementById("sayi");
   deger.value=s;
   s++;
}
 
function azalt(){
   deger= document.getElementById("sayi");
   deger.value=s;
  s--;
}
</script>
 
</head>
<body>

<button type="button" onclick="azalt()">-</button>
<input type="text" value="0" size="5" id="sayi" name="sayi">
<button type="button" onclick="artir()">+</button>

</body>
</html>
 
Sanırım bu örneklerle JavaScript'i anlamaya ve önemini daha fazla kavramaya başladınız. Bir web sitesini tasarlarken bu ve benzeri kodlamalarla çok sık karşılaşacaksınız. Örneğin yukarıda yaptığımız örneğin bir e-ticaret sitesinin sepeti içindeki ürün miktarını artırıp azaltmak amacıyla kullanabilirsiniz.

Mutlu Kodlamalar,
Oğuzhan TAŞ,
Mayıs, 2015


 
Bookmark and Share
Dil Değiştir(Change Language)
Kategoriler
Kütüphane Programı
En çok Okunan 18 Makale