Preis ermitteln mit Hilfe von 2 select Boxes

Nesti007 · 24. Apr. 2014

Hallo,
ich habe eine Frage und zwar, ich habe 2 select Boxes die und ich will jetzt wenn ich nun bei der erste etwas auswähle und bei der zweiten etwas auswähle mit Hilfe vom dem unterschied ein Preis ermitteln. Wie geht das? Hier ein Beispiel:http://instanteloboost.com/boosting/ kenne mich nicht so gut mit JavaScripts aus

PS: das mit den Bilder habe ich Hinbekommen hier ist mein Code:

HTML:

<script>
	function UpdateBoostPrice(param0) {
		var leagueSelect = document.getElementById("league" + param0);
		var divisionSelect = document.getElementById("division" + param0);
		
		
		
		var swArrAuswahl = [];
		for (i = 0; i < leagueSelect.length; i++) {   
			for (j = 0; j < divisionSelect.length; j++) {   
				swArrAuswahl.push(leagueSelect.options[i].value + divisionSelect.options[j].value);
			}
		}
		
		var selOpt = leagueSelect.options[leagueSelect.selectedIndex].value + divisionSelect.options[divisionSelect.selectedIndex].value;
			switch(selOpt) {
				case "BronzeV":
					currSrc = "bronze_5";
				break;
				case "BronzeIV":
					currSrc = "bronze_4";
				break;
				case "BronzeIII":
					currSrc = "bronze_3";
				break;
				case "BronzeII":
					currSrc = "bronze_2";
				break;
				case "BronzeI":
					currSrc = "bronze_1";
				break;
				case "SilverV":
					currSrc = "silver_5";
				break;
				case "SilverIV":
					currSrc = "silver_4";
				break;
				case "SilverIII":
					currSrc = "silver_3";
				break;
				case "SilverII":
					currSrc = "silver_2";
				break;
				case "SilverI":
					currSrc = "silver_1";
				break;
				case "GoldV":
					currSrc = "gold_5";
				break;
				case "GoldIV":
					currSrc = "gold_4";
				break;
				case "GoldIII":
					currSrc = "gold_3";
				break;
				case "GoldII":
					currSrc = "gold_2";
				break;
				case "GoldI":
					currSrc = "gold_1";
				break;
				case "PlatinumV":
					currSrc = "platinum_5";
				break;
				case "PlatinumIV":
					currSrc = "platinum_4";
				break;
				case "PlatinumIII":
					currSrc = "platinum_3";
				break;
				case "PlatinumII":
					currSrc = "platinum_2";
				break;
				case "PlatinumI":
					currSrc = "platinum_1";
				break;
				case "DiamondV":
					currSrc = "diamond_5";
				break;
				case "DiamondIV":
					currSrc = "diamond_4";
				break;
				case "DiamondIII":
					currSrc = "diamond_3";
				break;
				case "DiamondII":
					currSrc = "diamond_2";
				break;
				case "DiamondI":
					currSrc = "diamond_1";
				break;
			}
		
		document.getElementById('curPic' + param0).style.background = "url('images/tiers/" + currSrc + ".png') no-repeat center center"; 
		
	}
</script>

kkapsner · 24. Apr. 2014

Du kannst dir doch auf der Seite im Quelltext ansehen, wie das dort gemacht wurde...

PS: dein switch könnte man extrem vereinfachen, indem man die Zahl und das Material getrennt voneinander verarbeitet.
PPS: leagueSelect.options[leagueSelect.selectedIndex].value kann man viel kürzer schreiben: leagueSelect.value

Nesti007 · 24. Apr. 2014

Danke, das weiß ich schon das ich das so machen kann habe dann aber Probleme die Grafiken einzufügen

kkapsner · 24. Apr. 2014

Wie sehen die Probleme denn genau aus.

Nesti007 · 25. Apr. 2014

Also ich habe Folgendes Problem benutze ich den script von der Seite werden die Bilder nicht angezeigt(also habe ich es selber versucht und es hat geklappt) nun ist das Problem ich kriege es nicht hin das es den Preis berechnet denn es sind ja 2 verschiedene Scripts sitze schon eine Woche dran weiß einfach nicht mehr weiter.

kkapsner · 26. Apr. 2014

OK - als aller erstes musst du dir eine Preismetrik überlegen. Also wieviel Geld jeder Übergang kostet. Dazu überlegst du dir entweder eine Formel oder machst eine große Matrix.

Dies Formel/Matrix hat dann zwei Inputs (die Stufe, von der man kommt, und die, wo man hinwill) und den Preis aus Output. Den musst du dann nur noch auf der Seite anzeigen lassen (z.B. mit .innerHTML).

Nesti007 · 26. Apr. 2014

Ach so, vielen Dank für deine Hilfe.

Nesti007 · 26. Apr. 2014

Aber eine Frage was für eine Formel soll ich den da Benutzen habe es versucht, bekomme es aber nicht hin.

kkapsner · 26. Apr. 2014

Zeig' doch mal, was du probiert hast.

Die Formel können wir dir auch nicht sagen, da der Preis doch eure Entscheidung ist...

Nesti007 · 27. Apr. 2014

Also ich habe das jetzt so gemacht aber ich habe ein Fehler und finde den nicht :

HTML:

<html>
<script>
/**
		@param param0 
	*/
	function getPrice (param0, param1) {
		
		var leagueSelect0 = document.getElementById("league" + param0);
	    var leagueSelect1 = document.getElementById("league" + param1);
		var divisionSelect0 = document.getElementById("division" + param0);
		var divisionSelect1 = document.getElementById("division" + param1);
		var grades = new Array(10, 15, 20, 35, 50, 0);
		
		var price1 = 0;
		for (i = leagueSelect1.selectedIndex; i >= 0; i--) {
			price1 += grades[i] * (divisionSelect1.options.length - 1);
			if (i < grades.length - 1)
				price1 += grades[i + 1];
				
		}
		price1 -= grades[leagueSelect1.selectedIndex] * (divisionSelect1.options.length - divisionSelect1.selectedIndex);
		var price0 = 0;
		for (i = leagueSelect0.selectedIndex; i >= 0; i--) {
			price0 += grades[i] * (divisionSelect0.options.length - 1);
			if (i < grades.length - 1)
				price0 += grades[i + 1];
		}
		price0 -= grades[leagueSelect0.selectedIndex] * (divisionSelect0.options.length - divisionSelect0.selectedIndex);
		
		return price1 - price0 > 0 ? price1 - price0 : 0;
	}
	
	function UpdateBoostPrice(param0) {
		var leagueSelect = document.getElementById("league" + param0);
		var divisionSelect = document.getElementById("division" + param0);
	    var BoostPrice = document.getElementById("Price");
			
		var swArrAuswahl = [];
		for (i = 0; i < leagueSelect.length; i++) {
			for (j = 0; j < divisionSelect.length; j++) {   
				swArrAuswahl.push(leagueSelect.options[i].value + divisionSelect.options[j].value);
			}
		}
		
		var selOpt = leagueSelect.options[leagueSelect.selectedIndex].value + divisionSelect.options[divisionSelect.selectedIndex].value;
			switch(selOpt) {
				case "BronzeV":
					currSrc = "bronze_5";
				break;
				case "BronzeIV":
					currSrc = "bronze_4";
				break;
				case "BronzeIII":
					currSrc = "bronze_3";
				break;
				case "BronzeII":
					currSrc = "bronze_2";
				break;
				case "BronzeI":
					currSrc = "bronze_1";
				break;
				case "SilverV":
					currSrc = "silver_5";
				break;
				case "SilverIV":
					currSrc = "silver_4";
				break;
				case "SilverIII":
					currSrc = "silver_3";
				break;
				case "SilverII":
					currSrc = "silver_2";
				break;
				case "SilverI":
					currSrc = "silver_1";
				break;
				case "GoldV":
					currSrc = "gold_5";
				break;
				case "GoldIV":
					currSrc = "gold_4";
				break;
				case "GoldIII":
					currSrc = "gold_3";
				break;
				case "GoldII":
					currSrc = "gold_2";
				break;
				case "GoldI":
					currSrc = "gold_1";
				break;
				case "PlatinumV":
					currSrc = "platinum_5";
				break;
				case "PlatinumIV":
					currSrc = "platinum_4";
				break;
				case "PlatinumIII":
					currSrc = "platinum_3";
				break;
				case "PlatinumII":
					currSrc = "platinum_2";
				break;
				case "PlatinumI":
					currSrc = "platinum_1";
				break;
				case "DiamondV":
					currSrc = "diamond_5";
				break;
				case "DiamondIV":
					currSrc = "diamond_4";
				break;
				case "DiamondIII":
					currSrc = "diamond_3";
				break;
				case "DiamondII":
					currSrc = "diamond_2";
				break;
				case "DiamondI":
					currSrc = "diamond_1";
				break;
			}
		
		document.getElementById('curPic' + param0).style.background = "url('images/tiers/" + currSrc + ".png') no-repeat center center"; 
		document.getElementById('price_00').innerHTML = getPrice(0, 1);
		
	}
</script>
</html>

Ich vermute der Fehler liegt hier :

HTML:

		var price1 = 0;
		for (i = leagueSelect1.selectedIndex; i >= 0; i--) {
			price1 += grades[i] * (divisionSelect1.options.length - 1);
			if (i < grades.length - 1)
				price1 += grades[i + 1];
				
		}
		price1 -= grades[leagueSelect1.selectedIndex] * (divisionSelect1.options.length - divisionSelect1.selectedIndex);
		var price0 = 0;
		for (i = leagueSelect0.selectedIndex; i >= 0; i--) {
			price0 += grades[i] * (divisionSelect0.options.length - 1);
			if (i < grades.length - 1)
				price0 += grades[i + 1];
		}
		price0 -= grades[leagueSelect0.selectedIndex] * (divisionSelect0.options.length - divisionSelect0.selectedIndex);
		
		return price1 - price0 > 0 ? price1 - price0 : 0;

kkapsner · 27. Apr. 2014

Wie äußert sich der Fehler genau?

@mikdoe: da hätten wir beinahe gleichzeitig die Code-Tags gesetzt...

Nesti007 · 28. Apr. 2014

Also der Fehler ist Folgender : Es gibt verschiedene Divisionen und Ligen doch die Berechnung ist flasch, es wird bis Silber 2 richitg gerechnet.

kkapsner · 28. Apr. 2014

Da wir die Preise, die es ausgeben soll, nicht kennen, können wir leider auch nicht helfen, den Fehler zu finden...

Nesti007 · 29. Apr. 2014

Also : Je Bronze Division 10€
Silber 15€
Gold 20€
Platin 35€
Diamand 50€
Es gibt 5 Dinisions 1-5 (1 Beste 5 Schlechteste)

kkapsner · 29. Apr. 2014

Wieviel sollen die Übergänge kosten? Also von Silber 1 zu Gold 5? Ich denke, dass da der Fehler liegt...

Nesti007 · 30. Apr. 2014

Also: Silber 1 zu Gold 5 = 20€
Also: Gold 1 zu Platin 5 = 35€
Also: Platin 1 zu Diamond 5 = 50€

kkapsner · 01. Mai 2014

Code:

	var price1 = 0;
	for (var i = 0; i < leagueSelect1.selectedIndex; i += 1){
		price1 += grades[i] * (divisionSelect1.options.length - 1);
		price1 += grades[i + 1];
	}
	prive1 += grades[leagueSelect1.selectedIndex] * divisionSelect1.selectedIndex;

- sollte funktionieren, wenn das HTML so aussieht, wie ich es vermute.
Aber es ist eigentlich keine gute Idee, die Rechnung von den Positionen der <option>s im <select> abhängig zu machen. Gib' deinen <option>s besser eine value-Attribut, mit dem du dann rechnen kannst.

Nesti007 · 01. Mai 2014

Danke, ich habe es anders versucht und hat geklappt.

kkapsner · 01. Mai 2014

Bitte - gern geschehen.

Preis ermitteln mit Hilfe von 2 select Boxes

Nesti007

New member

kkapsner

Super Moderator

Nesti007

New member

kkapsner

Super Moderator

Nesti007

New member

kkapsner

Super Moderator

Nesti007

New member

Nesti007

New member

kkapsner

Super Moderator

Nesti007

New member

kkapsner

Super Moderator

Nesti007

New member

kkapsner

Super Moderator

Nesti007

New member

kkapsner

Super Moderator

Nesti007

New member

kkapsner

Super Moderator

Nesti007

New member

kkapsner

Super Moderator