Berechnung durchführen

[ScubaBen]

Hallo,
ich bin nen ziemlicher Newbie was Java angeht, komme aber in dem Projekt nicht drum herum.

Ich möchte einen Input ansprechen und mit dem Wert eine Brechnung durchführen.

Im Offline Test hat das für

<input type="text" onblur="stopCalc();" onfocus="startCalc();" value="" id="amount01" name="amount01">

mit

one = (document.prepurchase_exam.price01.value * document.prepurchase_exam.amount01.value);

wunderbar Funktioniert.

Jetzt habe wollte ich das Scrpit in das bestehende CMS einbinden.
Dort liegt aber für den Namen die folgende Konvention vor:

<input ... id="amount01" name="prepurchase_exam[amount01]">

Also habe ich das Script auf:

one = (document.prepurchase_exam.price01.value * document.prepurchase_exam.prepurchase_exam[amount01].value);

geändert. Dann scheint aber JS mit den [] ein Problem zu haben. Diese sind aber von Seiten des CMS eine Konvention.

Wie kann ich das Problem vermeiden? Wie spreche ich z.b. in der JS Zeile die ID an? Diese kann ich frei bestimmen.

Vielen Dank für eure Hilfe!

 

[j-l-n]

Die eckigen Klammern bewirken, dass JS das Ganze für eine Arraycollection hält. Generell rate ich von dem Objektzugriff via forms eher ab.
Stattdessen sollte man (was du auch mit der ID gefragt hast) z.B. document.getElementById(ID des Elements) verwenden.

Ferner sollte man unbedingt globale Variablen vermeiden! Also stattdessen "var one = ...". SELFHTML: JavaScript / Sprachelemente / Variablen und Werte


PS:

"JavaScript" != "Java"

 

[ScubaBen]

Hallo Julian und danke für die schnelle Antwort. Ich habe versucht Deine Punkte umzusetzen. Der durchgreifende Erfolg bleibt aber noch irgendwie aus.

Ich bin halt nen absoluter newbie/napp....

Mein Ansatz ist jetzt dieser:

		<script >
			function startCalc() {
				interval = setInterval("calc()", 100);
			}

			function calc() {
				var sum01 = document.getElementById("amount01") * document.getElementById("price01");
				document.getElementById("sum01") = sum01;
			}

			function stopCalc() {
				clearInterval(interval);
			}
		</script>

				<form  name="prepurchase_exam" enctype="multipart/form-data" id="prepurchase_exam" class="form-horizontal" method="post" action="#">
					<table class="product table">
						<tr>
							<th>Menge</th>
							<th>Produkt</th>
							<th>Einzelpreis¹</th>
							<th>Gesamtbetrag¹</th>
						</tr>
						<tr>
							<td class="amount">
							<input type="text" onblur="stopCalc();" onfocus="startCalc();" value="" name="prepurchase_exam[amount01]" class="price-input" id="amount01">
							</td>
							<td>Englische Version</td>
							<td class="price">
							<input type="text"disabled="disabled" onblur="stopCalc();" onfocus="startCalc();" value="8.50" name="prepurchase_exam[price01]" class="price-input" id="price01">
							 €</td>
							<td class="price">
							<input type="text" disabled="disabled" onblur="stopCalc();" onfocus="startCalc();" value="" name="prepurchase_exam[sum01]" class="price-input" id="sum01">
							 €</td>
						</tr>
					</table>
					</form>

Leider macht das Formular so erstmal garnichts. Ich bin mir aber auch sicher, dass das eine oder andere fehlt, da ich den ganzen Syntax leider noch nicht begriffen habe.
Am liebsten würde ich auch mit onchange arbeiten.

Vielen Dank für weitere Hinweise.

 

[ScubaBen]

OK... da fehlte nur .value in
document.getElementById("sum01").value = sum01;

jetzt bekomme ich allerdings als Reaktion NaN

 

[s4ty]

Bestimmt weil es Strings und keine Numerischen Werte sind. parseInt() in dem Fall.

 

[j-l-n]

Wofür ist das Intervall gut? Verwende stattdessen z.B. onkeyup, wenn du möchtest, dass das Skript bei jeder Eingabe die Rechnung aktualisiert!

<script>
//also nur folgende Funktion:
function calc() {
	var sum01 = document.getElementById("amount01") * document.getElementById("price01");
	document.getElementById("sum01") = sum01;
}
</script>

und dann in den Eingabefeldern jeweils

<input type="text" onkeyup="calc()" value="" name="prepurchase_exam[amount01]" class="price-input" id="amount01">

 

[ScubaBen]

Habs gelöst!
Wen es interessiert:

		<script >
			function startCalc() {
				interval = setInterval("calc()", 100);
			}

			function calc() {
				var sum01 = document.getElementById("amount01").value * document.getElementById("price01").value;
				document.getElementById("sum01").value = sum01;
			}

			function stopCalc() {
				clearInterval(interval);
			}
		</script>

 

[j-l-n]

Bestimmt weil es Strings und keine Numerischen Werte sind. parseInt() in dem Fall.

Nicht ganz. Es sind ja Kommazahlen enthalten. @ScubaBen: Schau dir mal parseFloat() an!

 

[j-l-n]

@ScubaBen: Hast du bereits meinen Hinweis zum Intervall beachtet? Übrigens ist es immer sinnvoll, eine Funktion variabel zu bauen. Also dass z.B. sie nicht nur bei den bestimmten IDs funktioniert. Sieh dir hierzu einmal SELFHTML: JavaScript / Objektreferenz / Function an!

 

[kkapsner]

Das erste Problem mit den eckigen Klammern kann man mit Schema 4 lösen...

PS: window.setInterval() sollte man als Parameter keinen String, sondern eine Funktionsreferenz übergeben.
PPS: so wie es mir scheint, kennst du die Fehlerkonsole nicht...