JQuery ile Toplama Örneği

sdkbyrm · 23 Aralık 2020

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.

https://jquery.com/download/

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);
});
});

JQuery ile Toplama Örneği

sdkbyrm