[Java-Script] Select-option > if 3 pierwsze warunki działają a od 4 wszystko się powtarza"nie chce tak"

Question

Mam 9x option , po kliknięciu na które kolwiek value chciałbym aby wykonała się jakaś akcja , czy to pojawił się jakiś napis, czy pewne obliczenie. Niestety,  gdy klikam na 4 to wyskakuje mi to co jest w 1 i tak dalej analogicznie.

W jaki sposób uzyskać dostęp/dane ze wszystkich  Option a nie tylko z 3 pierwszych.

 

<script>
	function zobacz()
	{
	
		var pole1 = document.getElementById("pole1").selectedIndex;
		var pole2 = document.getElementById("pole2").selectedIndex;
		var pole3 = document.getElementById("pole3").selectedIndex;

		if((document.getElementsByTagName("option")[pole1].value=="jeden") && (document.getElementsByTagName("option")[pole2].value=="jeden"))
		{
		
			if(document.getElementsByTagName("option")[pole3].value=="jeden")
			{console.log("a")}
			else if(document.getElementsByTagName("option")[pole3].value=="dwa")
			{console.log("b")}
			else if(document.getElementsByTagName("option")[pole3].value=="trzy")
			{console.log("c")}
			else if(document.getElementsByTagName("option")[pole3].value=="cztery")
			{console.log("d")}
			else if(document.getElementsByTagName("option")[pole3].value=="piec")
			{console.log("e")}
			else if(document.getElementsByTagName("option")[pole3].value=="szesc")
			{console.log("f")}
			
		}
		else if((document.getElementsByTagName("option")[pole1].value=="jeden") && (document.getElementsByTagName("option")[pole2].value=="dwa"))
		{
			
			if(document.getElementsByTagName("option")[pole3].value=="jeden")
			{console.log("ai")}
			else if(document.getElementsByTagName("option")[pole3].value=="dwa")
			{console.log("bi")}
			else if(document.getElementsByTagName("option")[pole3].value=="trzy")
			{console.log("ci")}
			else if(document.getElementsByTagName("option")[pole3].value=="cztery")
			{console.log("di")}
			else if(document.getElementsByTagName("option")[pole3].value=="piec")
			{console.log("ei")}
			else if(document.getElementsByTagName("option")[pole3].value=="szesc")
			{console.log("fi")}
		}
		
		
	}

</script>	

<select id="pole1">
		<option value="jeden">---A-I---</option>
		<option value="dwa">---B-I---</option>
		<option value="trzy">---C-I---</option>
	</select>
	<br/>
	<select id="pole2">
		<option value="jeden">---A-II---</option>
		<option value="dwa">---B-II---</option>
		<option value="trzy">---C-II---</option>
	</select>
	<br/>
	
	<select id="pole3">
	<optgroup label=" ">
		<option value="jeden">---I---</option>
		<option value="dwa">---II---</option>
		<option value="trzy">---III---</option>
	</optgroup>
	<optgroup label=" ">
		<option value="cztery">---IV---</option>
		<option value="piec">---V---</option>
		<option value="szesc">---VI---</option>
	</optgroup>
	<optgroup label=" ">
		<option value="siedem">---VII---</option>
		<option value="osiem">---VIII---</option>
		<option value="dziewiec">---IX---</option>
	</optgroup>
	</select>
	
	<input type="button" value="kliknij" onclick="zobacz()"/>

Answer 1

po pierwsze czystość kodu , po drugie słowo kluczowe switch i już o wiele łatwiej dojdziesz do błędu po trzecie użyj onClicka i będzie dobrze :)

Comments

onclicka do czego?
chodziło tylko o pokazanie listy elementów po najechaniu ;p

---

dobra zignoruj mój komentarz, pomyliłam zadania :D

Answer 2

Nie moge nic wymyślić , Switche w tym przypadku chyba na nic się zdają.

Chciałbym wszystko zrobić w IF'ach,

Dlaczego 3 pierwsze działają poprawnie a od 4 już nie?

 

<script>
	function zobacz()
	{
		var wag = document.getElementById("waga").value;
			wag = parseInt(wag);
		var wzro = document.getElementById("wzrost").value;
			wzro = parseInt(wzro);
		var wiek = document.getElementById("wiek").value;
			wiek = parseInt(wiek);
		
		var sil_dni = document.getElementById("sil_dni").value;
			sil_dni = parseInt(sil_dni);
		var sil_czas = document.getElementById("sil_czas").value;
			sil_czas = parseInt(sil_czas);
		
		var aer_dni = document.getElementById("aer_dni").value;
			aer_dni = parseInt(aer_dni);
		var aer_czas = document.getElementById("aer_czas").value;
			aer_czas = parseInt(aer_czas);
	
		var pole1 = document.getElementById("pole1").selectedIndex;
		var pole2 = document.getElementById("pole2").selectedIndex;
		var pole3 = document.getElementById("pole3").selectedIndex;

		var bmr_mez = ((9.99*wag)+(6.25*wzro)-(4.92*wiek)+5);
		
		if((document.getElementsByTagName("option")[pole1].value=="jeden") && (document.getElementsByTagName("option")[pole2].value=="jeden"))
		{
			var tea = ((sil_czas*sil_dni*7+(sil_dni*(4/100*bmr_mez)))+(aer_czas*aer_dni*5+(5)))/7;
			
			
			
			if(document.getElementsByTagName("option")[pole3].value=="jeden")
			
				{var tef = 6/100*(bmr_mez+tea+200);
				var tdee = bmr_mez+tea+tef+200;
				console.log("Endo Niska :"+tdee);}
				
				
			else if(document.getElementsByTagName("option")[pole3].value=="dwa")
			
				{var tef = 6/100*(bmr_mez+tea+300);
				var tdee = bmr_mez+tea+tef+300;
				console.log("Endo Średnia :"+tdee);}
				
				
			else if(document.getElementsByTagName("option")[pole3].value=="trzy")
			
				{var tef = 6/100*(bmr_mez+tea+400);
				var tdee = bmr_mez+tea+tef+400;
				console.log("Endo Wysoka :"+tdee);}
			
			
			
			else if(document.getElementsByTagName("option")[pole3].value=="cztery")
			
				{var tef = 8/100*(bmr_mez+tea+401);
				var tdee = bmr_mez+tea+tef+401;
				console.log("Mezo Średnia :"+tdee);}
			
			
			else if(document.getElementsByTagName("option")[pole3].value=="piec")
			
				{var tef = 8/100*(bmr_mez+tea+450);
				var tdee = bmr_mez+tea+tef+450;
				console.log("Mezo Średnia :"+tdee);}
			
			
			else if(document.getElementsByTagName("option")[pole3].value=="szesc")
			
				{var tef = 8/100*(bmr_mez+tea+500);
				var tdee = bmr_mez+tea+tef+500;
				console.log("Mezo Wysoka :"+tdee);}
			
		}
		
	}

</script>	

 

Comments

Dlaczego jesteś tak sceptycznie nastawiony do switch? 

Wielokrotne instrukcje IF...ELSE IF tak na prawdę są analizowane w dużo bardziej złożony i czasochłonny sposób:

if (a) {}
else if (b) {}
else if (c) {}
else if (d) {}
else {}

//jest analizowane jako:

if (a) {}
else {
    if (b) {}
    else {
        if (c) {}
        else {
            if (d) {}
            else {}
        }
    }
}

W takiej sytuacji znacznie lepszym rozwiązaniem jest użycie instrukcji switch. Ponad to wielokrotnie stosujesz zapis: document.getElementsByTagName("option")[pole3].value

Bardziej czytelnym i wydajniejszym rozwiązaniem będzie umieszczenie tego w zmiennej:

var optionPole3 = document.getElementsByTagName("option")[pole3].value;

switch (optionPole3) {
    case 'wartosc 1': tef = ...; tdee = ...; console.log(...); break;
    case 'wartosc 2': tef = ...; tdee = ...; console.log(...); break;
    case 'wartosc 3': tef = ...; tdee = ...; console.log(...); break;
}

Celowo wykropkowałem miejsca zamiast wpisać tam Twój kod, abyś mógł samodzielnie przećwiczyć sobie instrukcję switch jeśli będziesz chciał z niej skorzystać. Pamiętaj w tym wypadku o "break;" na końcu każdego "case". 

Switch porównuje wartości z użyciem operatora identyczności "===". Ty w swoim kodzie używasz "==". Nie jest to błędem, ale polecam poczytać czym się te zapisy różnią. W razie czego można użyć formy zapisu:

switch (true) {
    case optionPole3 == 'wartosc 1': ....... break;
    case optionPole3 == 'wartosc 2': ....... break;
}

Wejście w instrukcję switch z warunkiem true umożliwi pewne obejście operatora "===" i pozwoli stosować operator "==", lecz w tym wypadku musimy wskazać jakie wartości porównujemy.

 

Kolejna sprawa to wielokrotne "próby" deklarowania tych samych zmiennych w tym samym zasięgu. Pamiętaj, że w JavaScript deklaracje zmiennych słowem var odnoszą się do zasięgu funkcyjnego, a nie blokowego! Ten drugi można osiągnąć poprzez słowa let lub const (ale uważaj bo nie podlegają one tzw. hoistingowi). W Twoim wypadku tak na prawdę zmienne tef i tdee deklarujesz na samym początku funkcji z wartościami undefined, a dalej jedynie przypisujesz im różne wartości. Zastosuj więc jedną deklarację z var (lub let) na początku funkcji, a potem po prostu przypisuj im odpowiednie wartości).

 

Jeszcze jedna drobna sugestia, aby uprościć zapis deklaracji początkowych zmiennych:

var wag = document.getElementById("waga").value;
       wag = parseInt(wag);

//Zamień na:
var wag = parseInt(document.getElementById("waga").value,10);

Twoje rozwiązanie nie jest błędem, ale po co się męczyć i tworzyć tyle dodatkowych linii kodu. Końcowe "10" teoretycznie nie jest potrzebne, gdyż od ECMA Script 5 parseInt domyślnie jest wywoływane z podstawą 10, ale osobiście uważam to za dobrą praktykę.

---

Teraz gdy widze twój kod , to rzeczywiście jest on dużo bardziej przyjemniejszy od tylu if'ow ile tam miałem.

Mam pytanie ,  jak wsadzić do case 'value="jeden"', bo musze zrobić takich case'ow 9 i w kazdym musi byc zmieniona 1 - 2 rzeczy ,

---

Nie wiem czy dobrze rozumiem, że chodzi Ci po prostu o to jak zapisać Twój kod w switch zamiast elfe if?

var optionPole3 = document.getElementsByTagName("option")[pole3].value;
 
switch (optionPole3) {
    case 'jeden': 
                 tef = 6/100*(bmr_mez+tea+200);
                 tdee = bmr_mez+tea+tef+200;
                 console.log("Endo Niska :"+tdee);
                 break;
    case 'dwa':
                 tef = 6/100*(bmr_mez+tea+300);
                 tdee = bmr_mez+tea+tef+300;
                 console.log("Endo Średnia  :"+tdee);
                 break;
   ... i tak z kolejnymi case
}

 

Dla każdego case wkopiowałem bezpośrednio Twój kod. Jak przyjrzysz się Twojemu kodowi to łatwo można zauważyć wiele powtórzeń co można by nieco usprawnić i stworzyć bardziej uniwersalną funkcję, ale na razie możesz pozostawić w takiej formie jak masz. Z czasem, gdy opanujesz lepiej JS polecam powrócić do tego kodu gdyż jest to dobry kod do nauki podstaw refaktoryzacji :)

Wiem, że się powtórzę, ale jeszcze raz uczulam aby pamiętać o break na końcu każdego case. Jeśli byś przypadkowo pominął break, to instrukcja switch będzie wykonywać dalsze instrukcje, dla kolejnych case. Czasami może to być przydatna sztuczka, ale jeśli dopiero zaczynasz przygodę z instrukcjami warunkowymi to nie będę Ci mieszał i załóżmy na razie, że każdego case trzeba zakończyć break lub return (return gdy chcesz wyjść z funkcji zwracając jakąś wartość).

---

Wszystko dobrze wytłumaczyłeś i pokazałeś , normalnie wszystko powinno śmigać jak należy, jednak znowu pojawił się ten sam problem. 

if((document.getElementsByTagName("option")[pole1].value=="jeden") && (document.getElementsByTagName("option")[pole2].value=="jeden"))
		{
			var tea = ((sil_czas*sil_dni*7+(sil_dni*(4/100*bmr_mez)))+(aer_czas*aer_dni*5+(5)))/7;
			var Pole_nr3 = document.getElementsByTagName("option")[pole3].value;
			
			
			switch (Pole_nr3)
			{
				case 'jeden':
				tef = 6/100*(bmr_mez+tea+200);
				tdee = bmr_mez+tea+tef+200;
				console.log("Endo Niska :"+tdee);
				break;
				
				case 'dwa':
				tef = 6/100*(bmr_mez+tea+300);
				tdee = bmr_mez+tea+tef+300;
				console.log("Endo Średnia :"+tdee);
				break;
				
				case 'trzy':
				tef = 6/100*(bmr_mez+tea+400);
				tdee = bmr_mez+tea+tef+400;
				console.log("Endo Wysoka :"+tdee);
				break;
				
				case 'cztery':
				tef = 8/100*(bmr_mez+tea+401);
				tdee = bmr_mez+tea+tef+401;
				console.log("Mezo niska :"+tdee);
				break;
				
				case 'piec':
				tef = 8/100*(bmr_mez+tea+450);
				tdee = bmr_mez+tea+tef+450;
				console.log("Mezo Średnia :"+tdee);
				break;
			}
			
		}

 

<select id="pole3">
	<optgroup label="Endomorfik">
		<option value="jeden">---niska aktywność---</option>
		<option value="dwa">---średnia aktywność---</option>
		<option value="trzy">---wysoka aktywność---</option>
	</optgroup>
	<optgroup label="Mezomorfik">
		<option value="cztery">---niska aktywność---</option>
		<option value="piec">---średnia aktywność---</option>
		<option value="szesc">---wysoka aktywność---</option>
	</optgroup>
	<optgroup label="Ektomorfik">
		<option value="siedem">---niska aktywność---</option>
		<option value="osiem">---średnia aktywność---</option>
		<option value="dziewiec">---wysoka aktywność---</option>
	</optgroup>
	</select>

Kiedy klikam np na value="cztery" to pokazuje mi dokładnie to co jest w value="jeden"

a w value="piec" to co jest w value="dwa"

Nie wiem dlaczego nie pokazuje wszystkich wartości od 1 do 9 .

Zauważasz  może jakieś nieprawidłowości ?

---

jakoś doszedłem dlaczego tylko 3 pierwsze działały poprawnie.

W polu1 były tylko 3x <option>

a w polu3 już 9x <option>

w pole1 musi byc tyle samo <option> co w pole3, inaczej nie bedzie działac poprawnie.

teraz tylko ukryje w css 6x <option> w polu1  ktore sa mi zbedne. i gotowe.

Dzięki tym błędom dużo się nauczyłem. i juz niedlugo zaczne kolejny projekt tym razem zrezygnuje z IF na rzecz switch , by lepiej go opanować

---

Ciesze się, że udało Ci się rozwiązać problem.

Co do Twojego kolejnego projektu, to ja nigdzie nie pisałem, że instrukcja IF jest czymś złym. Wręcz przeciwnie, jest to chyba jedna z najczęściej stosowanych instrukcji w programowaniu (nie tylko JS), ale warto znać umiar w zbyt dużej liczbie instrukcji else if. Jeśli masz dużo takich warunków to polecam zrobić krok wstecz i sprawdzić, czy czasami lepszym rozwiązaniem nie będzie małą refaktoryzacja kodu i w ogóle zmiana koncepcji. Switch służy do obsługi wielu warunków jak np. w Twoim przykładzie.

Polecam jeszcze zapoznać się z tzw. operatorem trójkowym w formie:

(warunek) ? (działanie jeśli true) : (działanie jeśli false)

Pozdrawiam, i życzę sukcesów w kolejnych projektach :)