Javascript ile Vücut kitle endeksi hesaplayamama sorunu

HTML
1

Merhaba arkadaşlar.
Bugünlerde bir proje üzerinde çalışıyorum. Tam projeyi bitirdim derken bir hata ile karşılaştım. Maalesef en alttaki buton çalışmıyor. Yardım ederseniz sevinirim.
kod :

<html>
<head>
	<title>Vücut Kitle Endeksi Hesaplama</title>

	<script type="text/javascript">
		function tiklandiginda() 
		{
			var cinsiyet = document.getElementsByName("cinsiyet");
			var boy = document.getElementsByName("boy")
			var kilo = document.getElementsByName("kilo")

			if (cinsiyet == "erkek") 
			{
				endeks = kilo/(boy*boy)
				window.alert("vücut kilo endeksiniz : "+endeks+" beyefendi")
			} if (cinsiyet == "kadın") {
				endeks = kilo/(boy*boy)
				window.alert("vücut kilo endeksiniz : "+ endeks+ " hanımefendi")
			}
		}
	</script>
</head>
<body>
	<div style="background: green; color: white; padding: 300">
		<center><font size="10">Vücut Kütle Endeksi Hesaplama</font></center>
	</div>

	<noscript>
		<div style="background-color: red; padding: doldurulacak">
			<p align="right">
				<font size="10">Lütfen tarayıcı ayarlarınızdan javascripti açınız</font>
			</p>
		</div>
    </noscript>

	<div style="background-color: darkorange; color: white; padding: 150">
		<p align="right">
		    <font size="7">Vücut Kütle Endeksi Nedir</font>
		    <br/>
		    <br/>
		    <br/>
		    <font size="5">
		    	Vücut kitle endeksi vücudunuzun boyunuza oranla ne kadar sağlıklı bir<br/>
		    	durumda olduğunun hesaplanmasıdır. Altta, yani sonuçlarda zaten vücut kitle<br/>
		    	endeksi ne durumda olduğunuzu belirten bir metin ile gelecek. Ama eğer vücut<br/>
		    	kitle endeksiniz 18 veya altında ise zayıfsınız, 18 ile 25 arası normal, 25<br/>
		    	ile 30 arası fazla kilolu, 30 ve üstü obez olarak tanımlanır.<br/>
		    </font>	
		</p>
	</div>

	<div style="background-color: silver; padding: 70">
	    <p align="center">
		    <font size="8">Lütfen bütün alanları eksiksiz doldurunuz</font>
		</p>
	</div>

	<div style="background-color: silver; padding: 50">
		<form>
			<font size="4">
				<p align="center">
					<font size="5"><strong>Cinsiyetiniz nedir?</strong></font><br/>
					<br/>
					<br/>
					Erkek
					<input type="radio" name="cinsiyet" value="erkek">
					Kadın
					<input type="radio" name="cinsiyet" value="kadın"><br>
					<br/>
					<br/>
					<br/>
					<input type="number" name="boy">&nbsp&nbsp&nbspBOYUNUZ<br>
					<br/>
					<br/>
					<br/>
					<input type="number" name="kilo">&nbsp&nbsp&nbspKİLONUZ<br>
					<br/>
					<br/>
					<input type="button" onclick="tiklandiginda()" value="Kontrol et">
			    </p>
		    </font>
		</form>
	</div>
</body>
</html>
2

String içerisine değişken kullanımını yanlış yapmışsın. İki yöntem var:

window.alert(`vücut kitle endeksiniz ${endeks} beyefendi`)
// ya da
window.alert("vücut kitle endeksiniz" + endeks + "beyefendi")
1 Beğeni
3

Ama zaten ben de ikincideki gibi yazmıştım. Ona rağmen olmadı. Eğer kodlara bakarsan anlarsın.

4

Merhaba, elinize sağlık, sorun şuradan kaynaklanıyor:

getElementsByName birden fazla element döndürmeye meyilli bir fonksiyon (Elements olduğundan). Dolayısıyla hep bir liste döndürüyor (NodeList [IE ve Edge hariç diyor…]). name’i "cinsiyet" olan iki eleman var: radiobutton’lar. İkisi de seçiliyor ve 2 elemanlı bir NodeList döndürülüyor size. Bu noktada yapmamız gereken, bu NodeList’teki iki elemana da ayrı ayrı erişip hangisinin checked özelliğinin true olduğuna bakmaktır; öylelikle cinsiyet değişkenine uygun değeri atayabiliriz.

Gelin görün ki bu işlem querySelector ile çok, çok daha kolaylaşıyor. Bu fonksiyon, getElementsByName’den daha genel; herhangi (kompleks) bir query ile eleman seçebiliyoruz. Öyle ki, “radiobuttonlar’dan seçili olanı bul” bile diyebiliyoruz:

document.querySelector('input[name="cinsiyet"]:checked')

İlk olarak elemanın bir input olduğunu söyledik ((radio)butonlar, entry’ler, checkbox’lar felan oraya girer). Sonra [ ile bir niteliğini de sorguluyoruz: name’i "cinsiyet" olsun. Dahası, :checked ile “seçilmiş” olması gerektiğini de söylüyoruz. Artık .value diyerek seçilen cinsiyetin değerine ulaşırız:

const cinsiyet = document.querySelector('input[name="cinsiyet"]:checked').value

(not: hiçbir şey seçmedilerse, querySelector null döndürür; bunu kontrol etmek size kalmış :d)

boy ve kilo için de döndürülenin bir NodeList olduğunu görüyoruz getElementsByName’den dolayı. Bunlar radiobutton’lardan daha “basit” input elemanları olduğundan, querySelector’a gitmeden de yolumuzu bulabiliriz. name’i "boy" olan 1 tek eleman var, o yüzden döndürülen NodeList’te de 1 eleman olacaktır. O zaman [0] ile indeksleyip o elemana ulaşabiliriz; .value da değerini verir. Aynı mevzu "kilo" için de geçerli.

Yani

const boy = document.getElementsByName("boy")[0].value;

Son olarak, JavaScript için çok fark etmeyecek olsa da, bu .value’ların döndürdükleri string tipindedir; "72" * "72"'yi 5184 olarak hesaplıyor JavaScript ama, siz işi daha sağlama almak isterseniz, değerleri tam sayılara veya küsurlu sayılara çevirebilirsiniz (cast edebilirsiniz).

En son olarak, if-if yerine if-else if’i tercih edebilirsiniz; if-if’te ikisi de her zaman kontrol edilirken, if-else if’te en fazla ikisi kontrol edilir, değil mi. Bir de, endeks = kilo / (boy * boy) ikisinde de ortak olduğundan belki if’lere girmeden dışarıda hesaplayabilirsiniz.

1 Beğeni
5

Teşekkür ederim detaylı olarak yazmışsınız ama ben bu sorunu çözmek için ne yapmam gerektiğini anlayamadım. Lütfen daha basit bir şekilde anlatabilir misiniz ? Zaten javascriptte çok yeniyim. Yani söylediğiniz bir çok şeyi anlayamıyorum.

6

Tamamdır,

yerine

const cinsiyet = document.querySelector('input[name="cinsiyet"]:checked').value;
const boy = document.getElementsByName("boy")[0].value;
const kilo = document.getElementsByName("kilo")[0].value;
  • hangi radiobutton’un seçildiğini öğrenmek için querySelector’ı getElementsByName’e tercih ediyoruz.
  • boy ve kilo için, getElementsByName her zaman bir liste döndürdüğünden, ve bu durumda liste 1 elemanlı olduğundan [0] ile o elemana erişip değerini alıyoruz.
  • var yerine const kullanıyoruz, artık var eskide kalıyor. const "constant"ın kısaltılmışı gibi oluyor, sabit manasında. (sabit olmayacak değişkenler için ise let var.)
2 Beğeni