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

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>

<body>

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>

<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>

<!doctype html>

<html>

<head>

<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>

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>

İlgili

Yorum

Nuri Uslu dedi ki:

Haziran 30, 2019, 5:25 pm

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
ibrahim tunç dedi ki:

Mayıs 22, 2019, 3:56 pm

iyi çalışmalar

ben bu durumu kullanmak istiyorum ama toplamda bunu begenı begenmeme durumu gibi toplamda 130 satırda ayrı ayrı kullanmak istiyorum

Cevapla
Cihan dedi ki:

Aralık 3, 2018, 12:41 pm

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

Kasım 2020
P	S	Ç	P	C	C	P
« Eki
						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30

Bunu paylaş:

İlgili

İlginizi Çekebilir

Yorum

Yorum Yap X