JavaScript ile İki Açısı Girilen Üçgenin Diğer Açısını Bulma

Bu yazımızda JavaScript kullanarak iki açısı girilen bir üçgenin, 3. Açısını hesaplayacağız.


<input type="text" id="s1" placeholder="1. Açıyı Girin">
<input type="text" id="s2" placeholder="2. Açıyı Girin">
<input type="button" id="hesapla" value="hesapla">

Html:Öncelikle “s1” ve “s2” adında iki text nesnesi oluşturuyoruz. Sayılar girildikten sonra hesaplayıp ekrana yazdırması için bir buton oluşturuyoruz ve cevabı yazdırmak için bir div etiketi oluşturuyoruz.


var nSayi1=document.getElementById("s1");
var nSayi2=document.getElementById("s2");	
var btnHesap=document.getElementById("hesapla");

var nSayi1=document.getElementById("s1");

var nSayi2=document.getElementById("s2");

var btnHesap=document.getElementById("hesapla");

JavaScript:Script etiketlerinin içerisinde nesnelerin tamamını seçiyoruz. “nSayi1” ve “nSayi2” olarak oluşturduğum değişkenler “input”un tamamını aldı. Bunları Number’a çevirdiğimizde boş oldukları için içlerindeki değer 0 olacak ve sayı girdiğimizde içindeki değer değişmeyecek bu yüzden ekranda “0” değeri görülecektir.

Butona ise fonksiyon atayacağız.


btnHesap.onclick=function()
	{
		var sayi1=Number(nSayi1.value);
		var sayi2=Number(nSayi2.value);
		var sonuc=180-(sayi1+sayi2);
		document.getElementById("sonuc").innerHTML="Üçgenin diğer açısı: "+sonuc;
	}

btnHesap.onclick=function()

{

var sayi1=Number(nSayi1.value);

var sayi2=Number(nSayi2.value);

var sonuc=180-(sayi1+sayi2);

document.getElementById("sonuc").innerHTML="Üçgenin diğer açısı: "+sonuc;

}

Butona fonksiyon ve “.onclick” ile olay atıyoruz. Daha sonrasında butona basıldığında çalışacak olan kodlarımızı yazıyoruz.

Burada 3 değişken daha atadık. “sayi1” ve “sayi2” değişkenlerini; “nSayi1” ve “nSayi2” nesnelerinin içerisindeki value değerlerini ifade ediyor. İçerisindeki value değerlerini Number olarak çeviriyoruz ve yapılacak işlemi “sonuc” değişkenine atıyoruz.

“sonuc” değişkenini div etiketine aktarıyoruz.


#sonuc
{
	margin-top: 10px;
	font-size: 2em;
	color: red;
}

#sonuc

{

margin-top: 10px;

font-size: 2em;

color: red;

}

CSS:Son olarak div içerisine yazdığımız “sonuc” değişkenine css uyguluyoruz.

Kodları toparlayıp bir arada yazarsak şu şekilde olacaktır;


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Üçgende İç Açı Hesaplama</title>
<style>
	#sonuc{
		margin-top: 10px;
		font-size: 2em;
		color: red;
	}	
</style>

</head>
<body>
	<input type="text" id="s1" placeholder="1. Açıyı Girin">
	<input type="text" id="s2" placeholder="2. Açıyı Girin">
	<input type="button" id="hesapla" value="hesapla">
	<div id="sonuc"></div>



	
	var nSayi1=document.getElementById("s1");
	var nSayi2=document.getElementById("s2");	
	var btnHesap=document.getElementById("hesapla");
	
	
	btnHesap.onclick=function()
	{
		var sayi1=Number(nSayi1.value);
		var sayi2=Number(nSayi2.value);
		var sonuc=180-(sayi1+sayi2);
		document.getElementById("sonuc").innerHTML="Üçgenin diğer açısı: "+sonuc;
	}
	
	

</body>
</html>

<!doctype html>

<html>

<head>

<title>Üçgende İç Açı Hesaplama</title>

<style>

#sonuc{

margin-top: 10px;

font-size: 2em;

color: red;

}

</style>

</head>

<body>

var nSayi1=document.getElementById("s1");

var nSayi2=document.getElementById("s2");

var btnHesap=document.getElementById("hesapla");

btnHesap.onclick=function()

{

var sayi1=Number(nSayi1.value);

var sayi2=Number(nSayi2.value);

var sonuc=180-(sayi1+sayi2);

document.getElementById("sonuc").innerHTML="Üçgenin diğer açısı: "+sonuc;

}

</body>

</html>

Bunu paylaş:

Şunlar da Hoşunuza Gidebilir

Yorum yap X