JavaScript

JavaScript: Butona Tıklayınca Sayıyı Arttırma / Azaltma

9 yıl önce
5 Yorum
yazan Hayri

Web sayfasında artı butuna tıklayınca sayıyı bir arttıran, eksi butonuna tıklayınca sayıyı bir azaltan javascript örneği…

 

DEMO

 

JS & HTML

<body>
<input type=button onclick="arttir()" value="+">
<input type=button onclick="azalt()" value="-">
<input type=button id="sonuc" value="0">

<script>
function arttir(){

var sonuc=document.getElementById("sonuc");
sonuc.value=Number(sonuc.value)+1;
}

function azalt(){

var sonuc=document.getElementById("sonuc");
sonuc.value=Number(sonuc.value)-1;
}

</script>
</body>

CSS(resimdeki tasarımı elde etmek için)

<style>
input[type="button"]{
width: 200px;
height: 200px;
border:none;
font-size:3em;
background: #FF6766;
color:#E7E7E7;
}

</style>
[divider]

HTML & JS & CSS Kodlarının tümü

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
input[type="button"]{
width: 200px;
height: 200px;
border:none;
font-size:3em;
background: #FF6766;
color:#E7E7E7;
}

</style>
<title>YAZILIM BİLİŞİM</title>

</head>
<body>
<input type=button onclick="arttir()" value="+">
<input type=button onclick="azalt()" value="-">
<input type=button id="sonuc" value="0">

<script>
function arttir(){

var sonuc=document.getElementById("sonuc");
sonuc.value=Number(sonuc.value)+1;
}

function azalt(){

var sonuc=document.getElementById("sonuc");
sonuc.value=Number(sonuc.value)-1;
}

</script>
</body>
</html>

 

İlginizi Çekebilir

Yorum

  • merhaba,
    benim buna benzer biraz farklı bi isteğim var ama nasıl yapabilirim bilemiyorum.
    + tuşuna basınca artacak belli bir limit koyucam. yalnız online olarak üyeler veya ziyaretçiler artışı görebilecek. yani birisi bi yerden 100 e geldiğinde başka bi kullanıcı başka bi bilgsayardan 101 için artıya tıklicak? bunu nasıl yapabiliriz yardımcı olabilir misiniz?

    Cevapla

  • Merhaba,

    Öncelikle paylaşımınız için çok teşekkürler.

    Acaba değerin 0’dan az olmasını nasıl engelleyebiliriz. Yani Eksiye düşmesini nasıl engelleyebiliriz?

    Bu konuda yardımcı olur musunuz lütfen

    Cevapla

    • function azalt(){

      var sonuc=document.getElementById(“sonuc”);
      if(sonuc.value>0)
      {
      sonuc.value=Number(sonuc.value)-1;
      }
      }

      Cevapla

    • Cihan Bey , if koşulları yapmanız lazım. Eğerki sayı 0’dan büyük ise değere +1 atarsınız. else ilede brake kodu ile koşul blogunu sonlandırırsınız. Böylelikle değer 0’a dayandıgında koşul blogu zaten çalışmayacaktır.

      Cevapla

Yorum Yap