Javascript: Feld mit Fixzahl multiplizieren?

Seite 1 von 1 - Forum: Coding Stuff auf overclockers.at

URL: https://www.overclockers.at/coding-stuff/javascript_feld_mit_fixzahl_multiplizieren_107626/page_1 - zur Vollversion wechseln!

semteX schrieb am 20.02.2004 um 21:50

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 schrieb am 20.02.2004 um 21:54

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 schrieb am 20.02.2004 um 21:56

==> 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 schrieb am 20.02.2004 um 22:00

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 schrieb am 20.02.2004 um 22:03

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?

Rektal schrieb am 20.02.2004 um 23:31

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 schrieb am 21.02.2004 um 20:56

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 schrieb am 21.02.2004 um 21:05

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

semteX schrieb am 24.02.2004 um 15:04

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 schrieb am 24.02.2004 um 21:54

fehler war: eval war völlig falsch eingesetzt