"We are back" « oc.at

Javascript: Feld mit Fixzahl multiplizieren?

semteX 20.02.2004 - 21:50 2821 9
Posts

semteX

hasst die KI
Avatar
Registered: Oct 2002
Location: Pre
Posts: 14875
Hallo, ich hätt da ne bitte.

Ich bräucht ein javascript, dass ein feld (<input type='text'...) mit ner fixzahl multipliziert. dies soll ständig passieren (also sobald in das feld ne zahl eingegeben wird, ohne irgendwie auf "multi" drücken zu müssen)

könnte das bitte wer für mich machen? ich hab leider von js keine ahnung

danke im vorraus!

semteX

Rektal

Here to stay
Registered: Dec 2002
Location: Inside
Posts: 4517
Wenn du das "instant" machst hast du nur ein Problem: du wirst die Useability ueber den haufen schmeissen, weil der Benutzer dann eine Zahl eingibt und im selben Moment sich der Inhalt aber neu kalkuliert? Das kommt nicht gut an.

Falls dus unbedingt machen musst, kannst du dafuer das onkeyup-Event verwenden. Wenn es reicht dass der Feldinhalt nachtraeglich aktualisiert wird, nimm das onblur-Event. Das feuert dann ab, wenn das Feld den Fokus verliert.

HTH

semteX

hasst die KI
Avatar
Registered: Oct 2002
Location: Pre
Posts: 14875
==> bum

du hast mich soeben abgeschossen

ich hab oben geschrieben, dass ich leider keinen plan von JS habe :)

das mit dem "sofort" neu kalkulieren ist keine idee von mir, ist eine art "wunsch", das war auf der page haben will...

Rektal

Here to stay
Registered: Dec 2002
Location: Inside
Posts: 4517
Ok, kleines Beispiel:
Code:
<input type="text" onblur="this.value = this.value * 2;">
Wenn du das in der Seite einbaust, etwas eingibst (aber eine Zahl, sonst gibts einen Fehler => keine Typenueberpruefung) und dann den Fokus wegnimmst (sprich, du klickst ausserhalb des Feldes), dann wird der Wert neu kalkuliert. Tataa!

semteX

hasst die KI
Avatar
Registered: Oct 2002
Location: Pre
Posts: 14875
mhm i glaub ich habs verstanden... mal ausprobiern nachher danke

edit: oder a ned... was muss ich tun um z.b. den wert "extern" angezeigt zu bekommen? also z.b. irgendwo daneben als ganz normalen text?
Bearbeitet von semteX am 20.02.2004, 22:21

Rektal

Here to stay
Registered: Dec 2002
Location: Inside
Posts: 4517
Ah, die Ueberlegung ist natuerlich schon besser ;-)

Hier gibts auch wieder mehrere Moeglichkeiten.

Die portabelste (== geht in den meisten Browsers) ist wohl, wenn du ein zweites input-Element erzeugst, in dem du die neu kalkulierten Werte darstellst. Mittels dem Attribut disabled kannst du verhindern das der Benutzer dort Daten eingibt:
Code:
<input type="text" onkeyup="document.getElementByID('ergebnis').value = this.value * 13;">
<input id="ergebnis" type="text" disabled="disabled">
Nach jedem Tastendruck wird der Wert im zweiten input-Feld neu kalkuliert.

Oder du nimmst ein (mehr oder weniger) beliebiges anderes Element auf der Seite her und wechselst den Inhalt mit dem JS-Attribut .innerHTML aus:
Code:
<style>
#ergebnis {
  font-weight: bold;
}
</style>
<input type="text" onkeyup="document.getElementByID('ergebnis').innerHTML = "" + (this.value * 13);">
<div id="ergebnis">0</div>

.innerHTML funktioniert mit aelteren Browsers nicht, aber ich denke die derzeit aktuelle Generation hat damit keine Probleme mehr. Aber exoten wie Mac IE sind manchmal penibel damit.

Ich wuerde vorschlagen, Methode 1 zu nehmen, also ein zweites input-Feld, dieses disablen und mit CSS so stylen das man nicht "merkt" das es ein input-Feld ist. Das funktioniert dann sicher am besten in allen Browsern.

semteX

hasst die KI
Avatar
Registered: Oct 2002
Location: Pre
Posts: 14875
Code:
<script language="JavaScript">
var fix = 2;
var end;
var f = document.formular;
function berechnen()
{
	var f = document.formular;
	end = fix*f.testfeld.value;	
}
</script>

<form name='formular' action='ausg.html' method='post'>
<Input type='text' name='testfeld' onblur="berechnen()">
<Input type='submit' value='weg mit dem dreck'>
</form>
<script language="JavaScript">
document.write("<p>" + end + "</p>);
</script>

so schauts bis jetzt aus... funkt (natürlich) ned... mit css kenn i mi ehrlichgsagt nüsse aus... und beim 2. versteh i ned was .innerHTML tut...

tia

mfg

tomstig

OC Addicted
Avatar
Registered: Nov 2003
Location: /home/tomstig/
Posts: 1341
das ist das beste (löscht sogar buchstaben aus den feldern raus, wenn man welche hinschreibt):
made in tomstigs editor ;)
Code: PHP
<html>
<body>
<script type="text/javascript">
<!--
function rechne(){
document.formular.ergebnis.value = document.formular.zahl.value*document.formular.multiplikator.value;
}

function CheckNumbers(ort){
 eval("var text = document.formular." + ort + ".value;");
  if(isNaN(text)){
	eval("document.formular." + ort + ".value=eingabe1;");
  }else{
	eingabe1=text;
	if(text==""){
		text="";
	}
 }
 rechne();
}
// -->
</script>
<form name="formular">
<input type="text" name="zahl" onkeyup="rechne();CheckNumbers('zahl')"> x <input type="text" name="multiplikator" size="2" onkeyup="rechne();CheckNumbers('multiplikator')" value="2"> = <input type="text" name="ergebnis" readonly>
</form>
</body>
</html>

mfg thomas
Bearbeitet von tomstig am 21.02.2004, 21:13

semteX

hasst die KI
Avatar
Registered: Oct 2002
Location: Pre
Posts: 14875
Code: PHP
	function rechne(feld,preis, anzahl)
	{
		var rabatt= preis / 100 * document.formular.eval("rabatt"+feld).value;
		
		document.formular.eval("summe"+feld).value = (parseFloat(preis) - rabatt) * anzahl;
				
	}

so hab ich es jetzt

funzt im mozilla, ie bringt fehler... liegts daran, weil ich ned zuerst alles mir parseFloat() umgewandelt hab?

tia

semteX

hasst die KI
Avatar
Registered: Oct 2002
Location: Pre
Posts: 14875
fehler war: eval war völlig falsch eingesetzt
Kontakt | Unser Forum | Über overclockers.at | Impressum | Datenschutz