1. Anasayfa
  2. Javascript

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


0

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

Bu İçeriğe Tepkin Ne Oldu?
  • 16
    ba_ar_l_
    Başarılı
  • 4
    gayet_yi
    Gayet İyi
  • 6
    te_ekk_rler
    Teşekkürler
  • 4
    anlamad_m
    Anlamadım
  • 5
    yetersiz
    Yetersiz
Subscribe
Bildir
guest

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

0 Yorum
Inline Feedbacks
View all comments