JavaScript Arttır ve Azalt Butonu Kullanarak Sayıyı Değiştirme – Web Tasarım & Programlama
Bu yazıda JavaScript ile Button’ a tıklayınca sayıyı arttıran ve azaltan bir örnek oluşturacağız. Örneğimizde bulunan arttır butonu sayıyı arttırırken azalt butonu sayının bir eksilmesini sağlayacak.
Aşağıdaki kodları kopyala-Yapıştır yaparak bir html dosyası içine kaydedebilirsiniz.
Html+JavaScript Kodları:
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 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
<!doctype html> <html> <head> <meta charset=“utf-8”> <style> input[type=”button”]{ width: 200px; height: 200px; border:none; font-size:3em; color:#E7E7E7; } #sonuc{
} #azalt{ background: #e71717; } #arttir{ background: #1e6118; } #sonuc{ background: #02222a; }
</style> <title>yazilimkodlama.com</title>
</head> <body> <input id=“azalt” type=button onclick=“azalt()” value=“-“> <input type=button id=“sonuc” value=“0”> <input id=“arttir” type=button onclick=“arttir()” value=“+”> <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>
|
