1. Ana Sayfa
  2. Javascript
  3. JavaScript Örnekleri – Text’deki Sayıyı Arttırma,Azaltma

JavaScript Örnekleri – Text’deki Sayıyı Arttırma,Azaltma

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;”]

Yorum Yap

Kimler Neler Demiş?

Bir Cevap Yazın

This site uses Akismet to reduce spam. Learn how your comment data is processed.

  Subscribe  
Bildir