Bu örneğimizde 2 adet text girişinden kullanıcı tarafından girilen sayıları alan ve basılan butona göre toplama, çıkarma,çarpma ya da bölme işlemini gerçekleştireceğiz. Sayfamızda form içinde 2 adet text ve 4 adet button oluşturacağız. Her bir button için gerekli javascript kodlarını oluşturacağız. Örneğimizi 2 farklı yöntemle gerçekleştireceğiz.
1.Yöntem
1.Yöntem
JavaScript:
<!DOCTYPE html>
<html>
<head>
<title>www.yazilimkodlama.com</title>
<meta charset="utf-8">
</head>
<body>
<h1>JavaScript Dört İşlem</h1>
<form name="toplam">
<label>1. Sayı : </label>
<input type="text" id="sayi1"><br><br>
<label>2. Sayı : </label>
<input type="text" id="sayi2"><br><br>
<input type="button" id="btnTopla" value="TOPLA">
<input type="button" id="btnCikar" value="ÇIKAR">
<input type="button" id="btnCarp" value="ÇARP">
<input type="button" id="btnBol" value="BÖL">
</form>
<br>
<div id="kutuSonuc"></div>
<script>
//Toplama
var btn_Topla=document.getElementById("btnTopla");
btn_Topla.onclick=function(){
var s1=Number(document.getElementById("sayi1").value);
var s2=Number(document.getElementById("sayi2").value);
var sonuc=s1+s2;
document.getElementById("kutuSonuc").innerHTML="Sonuç : "+sonuc;
}
//Çıkarma
var btn_Cikar=document.getElementById("btnCikar");
btn_Cikar.onclick=function(){
var s1=Number(document.getElementById("sayi1").value);
var s2=Number(document.getElementById("sayi2").value);
var sonuc=s1-s2;
document.getElementById("kutuSonuc").innerHTML="Sonuç : "+sonuc;
}
//Çarpma
var btn_Carp=document.getElementById("btnCarp");
btn_Carp.onclick(){
var s1=Number(document.getElementById("sayi1").value);
var s2=Number(document.getElementById("sayi2").value);
var sonuc=s1*s2;
document.getElementById("kutuSonuc").innerHTML="Sonuç : "+sonuc;
}
//Bölme
var btn_Bol=document.getElementById("btnBol");
btn_Carp.onclick(){
var s1=Number(document.getElementById("sayi1").value);
var s2=Number(document.getElementById("sayi2").value);
var sonuc=s1/s2;
document.getElementById("kutuSonuc").innerHTML="Sonuç : "+sonuc;
}
</script>
</body>
</html>2.Yöntem
JavaScript:
<!DOCTYPE html>
<html>
<head>
<title>www.yazilimkodlama.com</title>
<meta charset="utf-8">
</head>
<body>
<h1>JavaScript Dört İşlem</h1>
<form name="toplam">
<label>1. Sayı : </label>
<input type="text" id="sayi1"><br><br>
<label>2. Sayı : </label>
<input type="text" id="sayi2"><br><br>
<input type="button" id="btnTopla" value="TOPLA" onclick="Toplama()">
<input type="button" id="btnCikar" value="ÇIKAR" onclick="Cikarma()">
<input type="button" id="btnCarp" value="ÇARP" onclick="Carpma()">
<input type="button" id="btnBol" value="BÖL" onclick="Bolme()">
</form>
<br>
<div id="kutuSonuc"></div>
<script>
//Toplama
function Toplama(){
var s1=Number(document.getElementById("sayi1").value);
var s2=Number(document.getElementById("sayi2").value);
var sonuc=s1+s2;
document.getElementById("kutuSonuc").innerHTML="Sonuç : "+sonuc;
}
function Cikarma(){
var s1=Number(document.getElementById("sayi1").value);
var s2=Number(document.getElementById("sayi2").value);
var sonuc=s1-s2;
document.getElementById("kutuSonuc").innerHTML="Sonuç : "+sonuc;
}
function Carpma(){
var s1=Number(document.getElementById("sayi1").value);
var s2=Number(document.getElementById("sayi2").value);
var sonuc=s1*s2;
document.getElementById("kutuSonuc").innerHTML="Sonuç : "+sonuc;
}
function Bolme(){
var s1=Number(document.getElementById("sayi1").value);
var s2=Number(document.getElementById("sayi2").value);
var sonuc=s1/s2;
document.getElementById("kutuSonuc").innerHTML="Sonuç : "+sonuc;
}
</script>
</body>
</html>
