Bu yazımızda JQuery ile text kutularına girilen 2 adet sayının JQuery kullanarak toplayacağız ve yine belirlediğimiz bir text kutusunda sonucu görüntüleyeceğiz.
Örneğimizde kullanacağımız javaScript dosyalarını “js” isimli bir klasörde tutacağız.
jquery-3.1.1.min.js dosyasını aşağıdaki linkten indirebilirsiniz.
Bu dosyayı indirdikten sonra toplama.js ve index.html dosyalarını oluşurarak örneğimize başlıyoruz.
İlk olarak index.html dosyasına aşağıdaki gibi input nesnelerini, yani 3 adet text ve 1 adet butonu ekleyeceğiz. Ve body kapatma etiketinden hemen önce “js” klasörümüzde bulunan JavaScript dosyalarımızı tanımlayacağız.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Untitled Document</title> </head> <body> <input type="text" id="s1"> <input type="text" id="s2"> <input type="text" id="sonuc"> <input type="button" id="topla" value="TOPLA"> <script src="js/jquery-3.1.1.min.js"></script> <script src="js/toplama.js"></script> </body> </html> |
html dosyamızı oluşturduktan sonra toplama.js dosyamızı oluşturacağız.
|
1 2 3 4 5 6 7 8 9 10 |
$(document).ready(function(){ $("#topla").on("click",function(){ var sayi1=Number($("#s1").val()); var sayi2=Number($("#s2").val()); var toplam=sayi1+sayi2; $("#sonuc").val(toplam); }); }); |
faydalı bir site. paylaşımlar için teşekkürler!
Elinize sağlık hocam güzel olmuş.
Merhaba sayfamda dört tane aynı name e sahip label var . Bu labeller içinde değişik rakamlar mevcut. Bu rakamları sayfanın yüklenme aşamasında ayrı bir label a toplayıp yazdırmak istiyorum. Yardımcı olur musunuz?
Öncelikle şu belirtmek isterim HTML label etiketleri name niteliği almazlar. name yerine class niteliği kullanabilirsin. Soruyu da bu şekilde cevaplıyorum. class niteliği kullanarak label etiketlerini ve içindeki değerleri okuyup başka bir label içinde ekrana yazdırdım.