JavaScript Örneklerimize kullanıcının bir text içerisindeki sayıyı butonlar yardımıyla arttırma ve azaltma işlemi devam ediyoruz. Uygulamanın çalışan halini konu sonundan test edebilirsiniz.
Yapılan işlemler kullanıcı herhangi bir butona bastığı zaman onclick olayı tetikleniyor ve bizim yazdığımız arttirma,azaltma veya sıfırlama fonksiyonlarından biri çalışıyor. Fonksiyonlar da document.getElementById metodu ile sayfa içerisindeki belirttiğimiz id’li elemanlar okunup değerleri sayıya çevrilip okunan değere ekleme veya azaltma işlemi yapılıyor.
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>http://www.bilisimogretmeni.com/</title>
<script type="text/javascript">
function arttirma() {
var deger = parseInt(document.getElementById('sayi').value);
document.getElementById('sayi').value = deger + 1;
}
function sifirlama() {
document.getElementById('sayi').value = "0";
}
function azaltma() {
var deger = parseInt(document.getElementById('sayi').value);
document.getElementById('sayi').value = deger - 1;
}
</script>
</head>
<body>
<input type="text" id="sayi" value="0" /><br />
<input type="button" value="Arttır" id="arttir" onclick="arttirma()"/>
<input type="button" value="Sıfırla" id="sifirla" onclick="sifirlama()" />
<input type="button" value="Azalt" id="azalt" onclick="azaltma()"/>
</body>
</html>
[wp-js-fiddle url=”http://jsfiddle.net/BilisimOgretmeni/ts1ae3qw/” style=”width:100%; height:200px; border:solid #4173A0 1px;”]
