Funktion dynamisch machen

[xtramen01]

Guten Tag,

Javascript ist leider nicht ganz mein Spezialgebiet. Darum brauche ich ein wenig Unterstützung in einer Sache.
Meine Frage wäre, hat jemand einen Ansatz wie ich folgende Funktionen dynamisch gestalten kann, sodaß ich nicht für jedes Input Feld eine neue Funktion Kopieren muss? Die Funktion errechnet aus einem Nettobetrag den Bruttobetrag. Das Problem ist nun, das ich ca. 15 Preise umrechnen muss. Bisher habe ich pro Input eine Funktion gehabt. Das ist quatsch, ich weis :-/. Deshalb meine Frage....

Vielen Dank für die Unterstützung im Voraus.

So funktioniert das leider nicht:

	function setBrutto(id){
		var tax = setTax();
		var price = document.getElementById("netto_value["id"]").value;
	
		if(tax > 0){
			price = price * ((tax / 100) + 1);
		}
	
		document.getElementById("brutto_value["id"]").value = roundIt(price, 4);
	}

EDIT: Achja das Problem an der Sache ist eigentlich, das die Steuer per Select Menü geändert werden kann und dann die Steuer anhand des neuen Steuersatzes neu errechnet wird. Beim Select Menü müsste ich ja dann sowieso mehrere Funktionsaufrufe starten oder?

 

[tombe]

Wäre mit Hilfe von jQuery viel schöne zu lösen aber mit reinem Javascript geht es auch:

<script language="javascript" type="text/javascript">
function berechnen (id) {
	if (id == "steuer") {
		for (a = 1; a <= 5; a++) {
			document.getElementById("feld" + a + "_brutto").value = (parseFloat(document.getElementById("feld" + a + "_netto").value) * document.getElementById("steuer").value) / 100;
		}
	} else {
		document.getElementById("feld" + id + "_brutto").value = (parseFloat(document.getElementById("feld" + id + "_netto").value) * document.getElementById("steuer").value) / 100;
	}
}
</script>

<input type="text" id="feld1_netto" name="feld1_netto" value="0" size="20" onblur="berechnen(1)" /> - <input type="text" id="feld1_brutto" name="feld1_brutto" value="" size="20" />
<br />
<input type="text" id="feld2_netto" name="feld2_netto" value="0" size="20" onblur="berechnen(2)" /> - <input type="text" id="feld2_brutto" name="feld2_brutto" value="" size="20" />
<br />
<input type="text" id="feld3_netto" name="feld3_netto" value="0" size="20" onblur="berechnen(3)" /> - <input type="text" id="feld3_brutto" name="feld3_brutto" value="" size="20" />
<br />
<input type="text" id="feld4_netto" name="feld4_netto" value="0" size="20" onblur="berechnen(4)" /> - <input type="text" id="feld4_brutto" name="feld4_brutto" value="" size="20" />
<br />
<input type="text" id="feld5_netto" name="feld5_netto" value="0" size="20" onblur="berechnen(5)"/> - <input type="text" id="feld5_brutto" name="feld5_brutto" value="" size="20" />
<br />
<select id="steuer" name="steuer" size="3" onchange="berechnen('steuer')">
    <option value="0" selected="selected" >0</option>
    <option value="7">7</option>
    <option value="19">19</option>
</select>

Die IDs der Felder müssen halt fortlaufend nummeriert sein sonst geht es so nicht!

 

[xtramen01]

Hey das ist schon mal ein super Ansatz, danke Dir dafür******
Ich habe sowieso vor JQuery einzusetzen, wie würde es denn damit aussehen?

Grüße

 

[tombe]

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){

	$("#netto1, #netto2, #netto3, #netto4, #netto5").blur(function () {
		idx = $(this).attr("id").replace(/netto/g, "");
		$("#brutto" + idx).val(($(this).val() * $("#steuer").val())/100);
	});

	$("#steuer").change (function () {
		$("#netto1, #netto2, #netto3, #netto4, #netto5").each(function (idx) {
			$("#brutto" + (idx + 1)).val(($(this).val() * $("#steuer").val())/100);
		});
	});

});
</script>

<input type="text" id="netto1" name="netto1" value="10" size="20" /> - <input type="text" id="brutto1" name="brutto1" value="" size="20" />
<br />
<input type="text" id="netto2" name="netto2" value="20" size="20" /> - <input type="text" id="brutto2" name="brutto2" value="" size="20" />
<br />
<input type="text" id="netto3" name="netto3" value="30" size="20" /> - <input type="text" id="brutto3" name="brutto3" value="" size="20" />
<br />
<input type="text" id="netto4" name="netto4" value="40" size="20" /> - <input type="text" id="brutto4" name="brutto4" value="" size="20" />
<br />
<input type="text" id="netto5" name="netto5" value="50" size="20" /> - <input type="text" id="brutto5" name="brutto5" value="" size="20" />
<br />
<select id="steuer" name="steuer" size="3" >
    <option value="0" selected="selected" >0</option>
    <option value="7">7</option>
    <option value="19">19</option>
</select>

Geht zwar aber glücklich bin ich damit noch nicht.
Habe da irgendwie das Gefühl das es noch um einiges einfacher zu lösen ist. Komme aber im Moment nicht drauf.

 

[jeipack]

Ich würde ein bisschen was am HTML ändern:
- netto und brutto Felder die Klasse netto resp. brutto geben
- Ein Netto-Brutto-Inputfelder-Paar in einen eigenen Container packen (Div)

Die Funktion würde dann etwa so aussehen:

$("#steuer").change (function () {
        $(".netto").each(function () {
            $(this).parent().find(".brutto").val(($(this).val() * $("#steuer").val())/100);
        });
    });

Da ich gerade zu faul war um alle Netto Brutto Paare noch ein Div zu basteln, benutze ich einfach .next(). Allerdings benutze ich .next() nicht so gern, da es recht gefährlich sein kann wenn man selbst oder jemand anders später zwischen die zwei Elemente noch was platziert.

Also hier mit .next():
http://jsfiddle.net/r2pN3/
(Nur die Funktion für #steuer.change ist angepasst, die Funktion für blur kann dann analog angepasst werden)

 

[xtramen01]

Vielen vielen Dank euch beiden. Ihr habt mir wirklich sehr geholfen!
Was die JQuery Funktionen genau machen, werde ich auch noch herausfinden

Gruß und schönen Abend!