Neuling: Komma und zweistellig mit kfm. Runden

[brokenbeatz]

Hallo,

als absoluter Newbie in Sachen Javascript bin ich auf mein bisheriges Ergebnis schon ganz stolz, aber leider fehlen noch zwei Details, die ich trotz vielfacher Suche und viele Versuchen nicht umgesetzt bekomme:
Folgender Code ist für eine Berechnungstabelle, hier sollen die Werte zum einen kaufmännisch auf zwei Stellen hinter dem Komma gerundet werden und zum anderen sollen es auch möglich sein, die Werte mit einem Komma statt einem Punkt einzugeben. Hier komme ich leider garnicht weiter, weshalb ich hier für jede Hilfe dankbar bin.

<script type="text/javascript">  
function perc1() {  
  document.getElementById("euro1").value = parseFloat(document.getElementById("rabatt1").value)*parseFloat(document.getElementById("summe1").value)/100;  
}  
</script>  
  
<script type="text/javascript">  
function barpreis1() {  
  document.getElementById("barpreis1").value = parseFloat(document.getElementById("summe1").value) - parseFloat(document.getElementById("euro1").value) - parseFloat(document.getElementById("nachlass1").value);  
}  
</script>  
  
<script type="text/javascript">  
function geb1() {  
  document.getElementById("geb1").value = parseFloat(document.getElementById("summe1").value) * 0.1;  
}  
</script>  
  
<script type="text/javascript">  
function add1() {  
  document.getElementById("summe1").value = parseFloat(document.getElementById("gl1").value) + parseFloat(document.getElementById("gr1").value) + parseFloat(document.getElementById("fass1").value) + parseFloat(document.getElementById("dstlg1-1").value) + parseFloat(document.getElementById("dstlg2-1").value) + parseFloat(document.getElementById("sonstg1").value);  
}  
</script>  
  
<script type="text/javascript">  
function rate1() {  
document.getElementById("rate1").value = parseFloat(document.getElementById("summe1").value) / parseFloat(document.getElementById("mon1").value) ;  
}  
  
</script>  
  
  
<table width="473" border="1"id="rechner">  
  <tr>  
    <td width="172">Brille</td>  
    <td width="108">Angebot 1</td>  
    <td width="76">Angebot 2</td>  
    <td width="89">Angebot 3</td>  
  </tr>  
  <tr>  
    <td>&nbsp;</td>  
    <td>&nbsp;</td>  
    <td>&nbsp;</td>  
    <td>&nbsp;</td>  
  </tr>  
  <tr>  
    <td>Glas rechts</td>  
    <td><input type="text" id="gl1" value="0"></td>  
    <td><input type="text" id="gl2"value="0"></td>  
    <td><input type="text" id="gl3"value="0"></td>  
  </tr>  
  <tr>  
    <td>Glas links</td>  
	<td><input type="text" id="gr1"value="0"></td>  
    <td><input type="text" id="gr2"value="0"></td>  
    <td><input type="text" id="gr3"value="0"></td>  
  </tr>  
  <tr>  
    <td>Fassung</td>  
	<td><input type="text" id="fass1"value="0"></td>  
    <td><input type="text" id="fass2"value="0"></td>  
    <td><input type="text" id="fass3"value="0"></td>  
  </tr>  
  
  <tr>  
    <td><p>Dienstleistung 1</p></td>  
	<td><input type="text" id="dstlg1-1"value="0"></td>  
    <td><input type="text" id="dstlg1-2"value="0"></td>  
    <td><input type="text" id="dstlg1-3"value="0"></td>  
  </tr>  
  <tr>  
    <td>Dienstleistung 2</td>  
	<td><input type="text" id="dstlg2-1"value="0"></td>  
    <td><input type="text" id="dstlg2-2"value="0"></td>  
    <td><input type="text" id="dstlg2-3"value="0"></td>  
  </tr>  
  <tr>  
    <td>sonstiges</td>  
	<td><input type="text" id="sonstg1"value="0"></td>  
    <td><input type="text" id="sonstg2"value="0"></td>  
    <td><input type="text" id="sonstg3"value="0"></td>  
  </tr>  
  <tr>  
    <td>&nbsp;</td>  
    <td>&nbsp;</td>  
    <td>&nbsp;</td>  
    <td>&nbsp;</td>  
  </tr>  
  <tr>  
    <td>Summe</td>  
    <td><input disabled type="text" id="summe1"></td>  
    <td><input type="text" id="summe2"></td>  
    <td><input type="text" id="summe3"></td>  
  </tr>  
  <tr>  
    <td>Nachla&szlig; %</td>  
	<td><input type="text" id="rabatt1"value="0"></td>  
    <td><input type="text" id="rabatt2"value="0"></td>  
    <td><input type="text" id="rabatt3"value="0"></td>  
  </tr>  
  
  <tr>  
    <td>Nachla&szlig; in &euro;</td>  
	<td><input disabled type="text" id="euro1"value="0"></td>  
    <td><input disabled type="text" name="euro2"value="0"></td>  
    <td><input disabled type="text" name="euro3"value="0"></td>  
  </tr>  
  <tr>  
    <td>Weiterer Nachlass &euro;</td>  
	<td><input type="text" id="nachlass1"value="0"></td>  
    <td><input type="text" id="nachlass2"value="0"></td>  
    <td><input type="text" id="nachlass3"value="0"></td>  
  </tr>  
  <tr>  
    <td>&nbsp;</td>  
    <td colspan="3"><div align="center">  
      <input type="button" value="berechnen" onClick="add1();perc1();barpreis1();geb1();rate1();">  
    </div></td>  
  </tr>  
  <tr>  
    <td>Barpreis</td>  
	<td><input disabled type="text" id="barpreis1"></td>  
    <td><input disabled type="text" id="barpreis2"></td>  
    <td><input disabled type="text" id="barpreis3"></td>  
  </tr>  
  <tr>  
  
  <tr>  
    <td>einmalige Teilnahmegeb&uuml;hr</td>  
<td><input disabled type="text" id="geb1"></td>  
    <td><input disabled type="text" id="geb2"></td>  
    <td><input disabled type="text" id="geb3"></td>  
  </tr>  
  <tr>  
    <td>&nbsp;</td>  
    <td>&nbsp;</td>  
    <td>&nbsp;</td>  
    <td>&nbsp;</td>  
  </tr>  
  <tr>  
    <td>&nbsp;</td>  
    <td>&nbsp;</td>  
    <td>&nbsp;</td>  
    <td>&nbsp;</td>  
  </tr>  
  <tr>  
    <td>utd.24 Anzahl Raten</td>  
	<td><input type="text" id="mon1"value="24"></td>  
    <td><input type="text" id="mon2"value="24"></td>  
    <td><input type="text" id="mon3"value="24"></td>  
  </tr>  
  
  <tr>  
    <td>utd.24 mtl. Betrag</td>  
<td><input disabled type="text" id="rate1"></td>  
    <td><input disabled type="text" id="rate2"></td>  
    <td><input disabled type="text" id="rate3"></td>  
  </tr>  
</table>

Hinweise: die Spalten Angebot 2-3 werden noch mit den entsprechend abgeänderten Codes gefüllt.
Ich freue mich auch über Tipps, ob und wie ich die Codes vielleicht verinfachen kann.

Danke Euch und beste Grüße,

Tobias

[Der Niederrheiner]

um kaufmännisch auf 2 Stellen zu runden, benutze ich folgenden Trick :

Zahl * 100  nehmen, dann mit Math.round() ganzzahlig runden und wieder durch 100 teilen

Bsp:  1,2534 €

mal 100  = 125,34

Math.round() = 125

geteilt 100 = 1,25

-----------------

für Komma gegen Punkt schau mal nach "search" und "replace" im selfhtml

Stephan

[Gunnar Bittersmann]

@@Der Niederrheiner:

nuqneH

um kaufmännisch auf 2 Stellen zu runden, benutze ich folgenden Trick :

Da gibt’s einen besseren Trick, JavaScript bietet das nämlich schon nativ: [ref:self812;javascript/objekte/number.htm#to_fixed@title=Number.toFixed()]

Qapla'

[brokenbeatz]

Hallo Niederrheiner,

auch an Dich schon einmal Danke! Sieht vielversprechend aus, nur auch hier die Frage: An welche Stelle(n) im Gesamt-Code ist die Funktion einzufügen?

Danke!

Tobias

@@Der Niederrheiner:

nuqneH

um kaufmännisch auf 2 Stellen zu runden, benutze ich folgenden Trick :

Da gibt’s einen besseren Trick, JavaScript bietet das nämlich schon nativ: [ref:self812;javascript/objekte/number.htm#to_fixed@title=Number.toFixed()]

Qapla'

[Gunnar Bittersmann]

@@brokenbeatz:

nuqneH

Hallo Niederrheiner,

Orientierung im Thread verloren?

An welche Stelle(n) im Gesamt-Code ist die Funktion einzufügen?

An der/n passenden.

Dort, wo der/die Zahlenwert(e) zur Anzeige gebracht werden.

Wenn mit den gerundeten Werten weitergerechnet werden soll, dann früher.

Qapla'

PS. TOFU schmeckt hier niemandem.

[Der Niederrheiner]

Ich würde es wie folgt machen :

1. wieso packst Du alle functions in einen eigenen script-Tag ? Pack die doch alle in einen einzigen. das spart schon mal viel Zeit und Platz.

2. Den toFixed() kannte ich nicht; macht aber definitiv Sinn :o)  !

3. Arbeite mit Funktionen, die Dir die Arbeit abnehmen

BISHER :

<script type="text/javascript">function perc1() {  document.getElementById("euro1").value = parseFloat(document.getElementById("rabatt1").value)*parseFloat(document.getElementById("summe1").value)/100;}</script>

usw.

NEU :

<script type="text/javascript">

function kommazupunkt(zahl) {
    zahl=zahl.toString();
    zahl=zahl.replace(/,/,".");
    zahl=parseFloat(zahl);
    return zahl;
  }

function perc1() {
    r=document.getElementById("rabatt1").value;
    s=document.getElementById("summe1").value;
    r=kommazupunkt(r);
    s=kommazupunkt(s);
    erg=s*(r/100);
    document.getElementById("euro1").value = erg.toFixed(2);
  }

function perc2 ......
  usw. usw.
</script>

Man kann den Code natürlich noch schöner verschachteln, aber so ist er für einen newbie besser lesbar
(hoffe ich)

Stephan

[Der Martin]

Hallo,

function kommazupunkt(zahl) {

zahl=zahl.toString();
    zahl=zahl.replace(/,/,".");
    zahl=parseFloat(zahl);
    return zahl;
  }

  
diese Funktion ist sinnlos. Anscheinend erwartet sie einen Zahlenwert. Den wandelt sie dann in einen String um (mit beliebig vielen Dezimalstellen), ersetzt in diesem String dann Kommas durch Punkte (obwohl ein Komma in diesem String gar nicht vorkommen kann), und versucht dann den String wieder als Zahl zu interpretieren. Das Ergebnis sollte also wieder der ursprüngliche Zahlenwert sein. Mit anderen Worten: Die Funktion tut nichts, was man irgendwie feststellen könnte.  
  

> ~~~javascript

function perc1() {  

>     r=document.getElementById("rabatt1").value;  
>     s=document.getElementById("summe1").value;  
>     r=kommazupunkt(r);  
>     s=kommazupunkt(s);  
>     erg=s*(r/100);  
>     document.getElementById("euro1").value = erg.toFixed(2);  
>   }

Hier rufst du kommazupunkt() mit Strings als Argument auf; es erscheint mir aber witzlos, toString() auf einen String anzuwenden. Ich bin mir nicht mal sicher, ob toString() für Strings überhaupt implementiert ist.

Nenn doch deine erste Funktion ParseStringToFloat(), und lass den Aufruf von toString() am Anfang einfach weg. Dann ergibt sie nämlich Sinn: Das Argument ist die String-Darstellung eines Zahlenwertes, wahlweise mit Punkt oder Komma als Dezimalzeichen, und das Ergebnis ist der tatsächliche Zahlenwert.

Man kann den Code natürlich noch schöner verschachteln, aber so ist er für einen newbie besser lesbar (hoffe ich)

Das ist fraglich. Für mich (Programmierer seit fast 30 Jahren) sind zwei verschachtelte Funktionsaufrufe leichter nachvollziehbar, als wenn sich der Typ einer Variablen plötzlich ändert. Muss jeder selbst wissen ...

Ciao,
 Martin

[Christian Kruse]

Moin Martin,

function kommazupunkt(zahl) {

zahl=zahl.toString();
    zahl=zahl.replace(/,/,".");
    zahl=parseFloat(zahl);
    return zahl;
  }

>   
> diese Funktion ist sinnlos. Anscheinend erwartet sie einen Zahlenwert. Den wandelt sie dann in einen String um (mit beliebig vielen Dezimalstellen), ersetzt in diesem String dann Kommas durch Punkte (obwohl ein Komma in diesem String gar nicht vorkommen kann), und versucht dann den String wieder als Zahl zu interpretieren. Das Ergebnis sollte also wieder der ursprüngliche Zahlenwert sein. Mit anderen Worten: Die Funktion tut nichts, was man irgendwie feststellen könnte.  
  
Sofern du einen Float in die Funktion steckst. Steckst do einen String hinein, bekommst du einen Float zurück. Das `toString()` ist ein „type ensurance”: es wird sichergestellt, dass der Eingabewert ein String ist.  
  

> […] es erscheint mir aber witzlos, toString() auf einen String anzuwenden. Ich bin mir nicht mal sicher, ob toString() für Strings überhaupt implementiert ist.  
  
`toString()` auf einen String angewendet gibt den String zurück. Das ganze hat den Zweck sicherzustellen, dass auf dem richtigen Datentyp operiert wird. Ein verbreitetes Konstrukt in dynamischen Programmiersprachen, bei denen der Interpreter bzw Compiler nicht sicherstellen kann, dass der gewünschte Datentyp übergeben wird.  
  
LG,  
 CK  

-- 
<http://ck.kennt-wayne.de/>  

[molily]

Hallo,

[…] Ich bin mir nicht mal sicher, ob toString() für Strings überhaupt implementiert ist.

Könnte man ja auch einfach mal nachschauen:
String.prototype.toString

toString ist übrigens für JEDES Objekt definiert:
http://es5.github.io/#[e-mail]

(Genauer gesagt für jedes Objekt, welches Object.prototype in der Prototype-Chain hat. Das sind alle üblichen Objekte der JavaScript-Welt, die nicht gerade mit Object.create(null) erzeugt worden sind oder bei denen __proto__ überschrieben wurde.)

toString() auf einen String angewendet gibt den String zurück. Das ganze hat den Zweck sicherzustellen, dass auf dem richtigen Datentyp operiert wird. Ein verbreitetes Konstrukt in dynamischen Programmiersprachen, bei denen der Interpreter bzw Compiler nicht sicherstellen kann, dass der gewünschte Datentyp übergeben wird.

Korrekt. Ein bisschen sinnvoller wäre übrigens [link:http://es5.github.io/#x15.5.1.1@title=String](…), weil toString zwar für Objekte, aber nicht für alle Typen definiert ist. (null).toString() und (undefined).toString() funktioniert aus naheliegenden Gründen nicht. Allerdings: Wenn der Funktion null oder undefined übergeben wird, kann sie ruhig mit einer Exception abbrechen.

Mathias

[Der Martin]

Hallo,

Könnte man ja auch einfach mal nachschauen:
String.prototype.toString

könnte man, wenn man wüsste, wo (von wem) Javascript spezifiziert ist - oder wenn man daran denken würde, dass Javascript seinerseits ja "nur" eine Implementierung von ECMAScript ist. Hab ich aber nicht dran gedacht.

Du verweist da übrigens auf eine TLD, von der ich bis eben noch nicht einmal wusste, dass es sie gibt. Warum wählt jemand ausgerechnet die TLD der British Indian Ocean Territories? Hört sich für mich ungefähr so seriös an wie die diversen Sites unter den TLDs .vu oder .tk, die vor 10..15 Jahren "in" waren.
Na gut, egal. Hat es einen Grund, dass du gezielt auf die toString-Methode des Date-Objekts verweist? Meintest du nicht eigentlich String.toSting?

toString ist übrigens für JEDES Objekt definiert:
http://es5.github.io/#[e-mail]

Danke. Genau das war mir nicht bekannt. Wenn es direkt für Object definiert ist, dann ist es logischerweise auch für String verfügbar. Ich hatte aber nicht erwartet, dass es so weit oben in der Klassenhierarchie verankert ist.

Ciao,
 Martin

[molily]

Hallo,

Du verweist da übrigens auf eine TLD, von der ich bis eben noch nicht einmal wusste, dass es sie gibt.

github.io ist die Domain für Inhalte von Benutzern von github.com. Github ist die wichtigste Webplattform für Open-Source-Projekte. Webentwickler sollten sie kennen(lernen).

Die ECMAScript-Spezifikation ist ursprünglich ein PDF und erst seit einer Zeit gibt es auch eine offizielle HTML-Version: http://www.ecma-international.org/ecma-262/5.1/

es5.github.io ist eine von der Community erarbeitete kommentierte und erweiterte HTML-Version der ES-5.1-Spezifikation. Siehe dort z.B. Object.prototype.toString.

Wenn man nicht weiß, wo eine JavaScript-Technik spezifiziert ist, so hilft eine Suche im Mozilla Developer Network. Bei den meisten Objekten, Methoden und Eigenschaften steht jeweils die definierende Spezifikation dabei (z.B. ECMAScript, HTML5, W3C DOM Events usw.).

Meintest du nicht eigentlich String.toSting?

Ja.

Mathias

[Der Martin]

Moin,

Du verweist da übrigens auf eine TLD, von der ich bis eben noch nicht einmal wusste, dass es sie gibt.
github.io ist die Domain für Inhalte von Benutzern von github.com.

es war nicht Github, das mir als "ungewöhnlich" aufgefallen ist. Es war die TLD .io, die mich stutzen ließ, weil sie mir noch nie vorher begegnet ist - und weil ich den "Missbrauch" bzw. das Umdeuten von ccTLDs auf andere Bedeutungen als die Länderbezeichnung grundsätzlich missbillige (wie z.B. auch oft bei .tv).

Die ECMAScript-Spezifikation ist ursprünglich ein PDF ...

Das war mir geläufig.

und erst seit einer Zeit gibt es auch eine offizielle HTML-Version: http://www.ecma-international.org/ecma-262/5.1/

Das noch nicht, danke.

Ciao,
 Martin

[brokenbeat]

Hallo Martin,

ich hoffe diesmal bin ich wenigstens mit den Namen und dem Tofu nicht durcheinandergeraten...
Ich habe nun den Tipp vom Stephan versucht umzusetzen, ohne Ergebnis, anschließend habe ich versucht deinen Ratschlag hier mit zu integrieren, was aber auch leider kein brauchbares Resultat ergab, sprich: Es tut sich leider nix:-(

Kannst Du mir sagen, wo ich den Fehler gemacht habe?

Ich danke Dir,

Tobias

<script type="text/javascript">  
function ParseStringToFloat() {  
    zahl=zahl.replace(/\,/,".");  
    zahl=parseFloat(zahl);  
    return zahl;  
  }  
  
  function perc1() {  
    r=document.getElementById("rabatt1").value;  
    s=document.getElementById("summe1").value;  
    r=kommazupunkt(r);  
    s=kommazupunkt(s);  
    erg=s*(r/100);  
    document.getElementById("euro1").value = erg.toFixed(2);  
  }  
  
  function barpreis1() {  
  	s=document.getElementById("summe1").value  
  	n=document.getElementById("nachlass1").value  
  	e=document.getElementById("euro1").value  
  	s=kommazupunkt(s);  
  	n=kommazupunkt(n);  
  	e=kommazupunkt(e);  
  	erg=s-n-e;  
  	document.getElementById("barpreis1").value = erg.toFixed(2);  
  }  
  
 function geb1() {  
    s=document.getElementById("summe1").value  
    s=kommazupunkt(s);  
	erg=s*0.1;  
    document.getElementById("geb1").value = erg.toFixed(2);  
  }  
  
  function add1() {  
 	gr=document.getElementById("gr1").value  
 	gl=document.getElementById("gl1").value  
	f=document.getElementById("fass1").value  
	d1=document.getElementById("dstgl1-1").value  
	d2=document.getElementById("dstgl1-2").value  
	s=document.getElementById("sonstg1").value  
	gr=kommazupunkt(gr);  
  	gl=kommazupunkt(gl);  
  	f=kommazupunkt(f);  
	d1=kommazupunkt(d1);  
  	d2=kommazupunkt(d2);  
  	s=kommazupunkt(s);  
	erg=gl+gr+f+d1+d2+s  
    document.getElementById("summe1").value = erg.toFixed(2);  
  }  
  function rate1() {  
	s=document.getElementById("summe").value  
	m=document.getElementById("mon1").value  
	s=kommazupunkt(s);  
	m=kommazupunkt(m);  
	erg=s/m  
	document.getElementById("rate1").value = erg.toFixed(2);  
  }  
  
</script>  
  
<table width="473" border="1"id="rechner">  
  <tr>  
    <td width="172">Brille</td>  
    <td width="108">Angebot 1</td>  
    <td width="76">Angebot 2</td>  
    <td width="89">Angebot 3</td>  
  </tr>  
  <tr>  
    <td>&nbsp;</td>  
    <td>&nbsp;</td>  
    <td>&nbsp;</td>  
    <td>&nbsp;</td>  
  </tr>  
  <tr>  
    <td>Glas rechts</td>  
    <td><input type="text" id="gl1" value="0"></td>  
    <td><input type="text" id="gl2"value="0"></td>  
    <td><input type="text" id="gl3"value="0"></td>  
  </tr>  
  <tr>  
    <td>Glas links</td>  
	<td><input type="text" id="gr1"value="0"></td>  
    <td><input type="text" id="gr2"value="0"></td>  
    <td><input type="text" id="gr3"value="0"></td>  
  </tr>  
  <tr>  
    <td>Fassung</td>  
	<td><input type="text" id="fass1"value="0"></td>  
    <td><input type="text" id="fass2"value="0"></td>  
    <td><input type="text" id="fass3"value="0"></td>  
  </tr>  
  
  <tr>  
    <td><p>Dienstleistung 1</p></td>  
	<td><input type="text" id="dstlg1-1"value="0"></td>  
    <td><input type="text" id="dstlg1-2"value="0"></td>  
    <td><input type="text" id="dstlg1-3"value="0"></td>  
  </tr>  
  <tr>  
    <td>Dienstleistung 2</td>  
	<td><input type="text" id="dstlg2-1"value="0"></td>  
    <td><input type="text" id="dstlg2-2"value="0"></td>  
    <td><input type="text" id="dstlg2-3"value="0"></td>  
  </tr>  
  <tr>  
    <td>sonstiges</td>  
	<td><input type="text" id="sonstg1"value="0"></td>  
    <td><input type="text" id="sonstg2"value="0"></td>  
    <td><input type="text" id="sonstg3"value="0"></td>  
  </tr>  
  <tr>  
    <td>&nbsp;</td>  
    <td>&nbsp;</td>  
    <td>&nbsp;</td>  
    <td>&nbsp;</td>  
  </tr>  
  <tr>  
    <td>Summe</td>  
    <td><input disabled type="text" id="summe1"></td>  
    <td><input type="text" id="summe2"></td>  
    <td><input type="text" id="summe3"></td>  
  </tr>  
  <tr>  
    <td>Nachla&szlig; %</td>  
	<td><input type="text" id="rabatt1"value="0"></td>  
    <td><input type="text" id="rabatt2"value="0"></td>  
    <td><input type="text" id="rabatt3"value="0"></td>  
  </tr>  
  
  <tr>  
    <td>Nachla&szlig; in &euro;</td>  
	<td><input disabled type="text" id="euro1"value="0"></td>  
    <td><input disabled type="text" name="euro2"value="0"></td>  
    <td><input disabled type="text" name="euro3"value="0"></td>  
  </tr>  
  <tr>  
    <td>Weiterer Nachlass &euro;</td>  
	<td><input type="text" id="nachlass1"value="0"></td>  
    <td><input type="text" id="nachlass2"value="0"></td>  
    <td><input type="text" id="nachlass3"value="0"></td>  
  </tr>  
  <tr>  
    <td>&nbsp;</td>  
    <td colspan="3"><div align="center">  
      <input type="button" value="berechnen" onClick="add1();perc1();barpreis1();geb1();rate1();ParseStringToFloat();">  
    </div></td>  
  </tr>  
  <tr>  
    <td>Barpreis</td>  
	<td><input disabled type="text" id="barpreis1"></td>  
    <td><input disabled type="text" id="barpreis2"></td>  
    <td><input disabled type="text" id="barpreis3"></td>  
  </tr>  
  <tr>  
  
  <tr>  
    <td>einmalige Teilnahmegeb&uuml;hr</td>  
<td><input disabled type="text" id="geb1"></td>  
    <td><input disabled type="text" id="geb2"></td>  
    <td><input disabled type="text" id="geb3"></td>  
  </tr>  
  <tr>  
    <td>&nbsp;</td>  
    <td>&nbsp;</td>  
    <td>&nbsp;</td>  
    <td>&nbsp;</td>  
  </tr>  
  <tr>  
    <td>&nbsp;</td>  
    <td>&nbsp;</td>  
    <td>&nbsp;</td>  
    <td>&nbsp;</td>  
  </tr>  
  <tr>  
    <td>utd.24 Anzahl Raten</td>  
	<td><input disabled type="text" id="mon1"value="24"></td>  
    <td><input type="text" id="mon2"value="24"></td>  
    <td><input type="text" id="mon3"value="24"></td>  
  </tr>  
  
  <tr>  
    <td>utd.24 mtl. Betrag</td>  
<td><input disabled type="text" id="rate1"></td>  
    <td><input disabled type="text" id="rate2"></td>  
    <td><input disabled type="text" id="rate3"></td>  
  </tr>  
</table>

[JürgenB]

Hallo brokenbeat,

function ParseStringToFloat() {

hier fehlt der Parameter:

function ParseStringToFloat(zahl) {

r=kommazupunkt(r);

wo ist kommazupunkt definiert? Meinst du evtl. ParseStringToFloat

Gruß, Jürgen

PS Kennst du die Fehlerkonsole?

[brokenbeatz]

Guten Morgen Jürgen,

danke Dir für die Hinweise, ja, ich meinte ParseStringToFloat(zahl), auch nach der entsprechenden Korrektur funktionieren die Funktionen leider noch nicht. Die Fehlerkonsole kenne ich nicht, bzw. schreibe ich die Scripts in Dreamweaver, der mir den einen oder anderen Fehler auswirft, jedoch zeigt es hier keine an...:-(

Gruß,

Tobias

[JürgenB]

Hallo brokenbeatz,

Guten Morgen Jürgen,

danke Dir für die Hinweise, ja, ich meinte ParseStringToFloat(zahl), auch nach der entsprechenden Korrektur funktionieren die Funktionen leider noch nicht.

und wie äußert sich das? Stell mal eine Beispielseite online.

Die Fehlerkonsole kenne ich nicht, bzw. schreibe ich die Scripts in Dreamweaver, der mir den einen oder anderen Fehler auswirft, jedoch zeigt es hier keine an...:-(

Die Fehlerkonsole oder bessere Debuging-Tools sind beim Schreiben von Javascripten unverzichtbare Werkzeuge, wie der Zollstock beim Tischlern oder die Wasserwaage beim Mauern. Mach dich da mal kundig. Ich benutze bei der Entwicklung den Firefox mit dem Add-on Firebug für einfache Tests nehme ich die Fehlerkonsole (Strg. Shift j). Beim IE komst du mit F12 in die Debug-Oberfläche.

Gruß, Jürgen

[Der Niederrheiner]

Hallo,

function kommazupunkt(zahl) {

zahl=zahl.toString();
    zahl=zahl.replace(/,/,".");
    zahl=parseFloat(zahl);
    return zahl;
  }

>   
> diese Funktion ist sinnlos. Anscheinend erwartet sie einen Zahlenwert.  
  
Das ist nicht richtig. Im Start-Post wurde um Antwort gebeten, ob mann Werte mit KOMMA, und nicht mit US-Zahlen-PUNKT, verarbeiten kann. Daher macht die Function Sinn.  
  
Eine Zahl mit KOMMA würde in einer Berechnung crashen, daher der Tausch Komma gegen Punkt.  
Die Umwandlung toString muss sein, da funktionen wie search oder replace nur auf String angewendet werden können. Eine korrekte, punkt getrennte Zahl würde ohne also zum Crash führen !  
  
  
Den wandelt sie dann in einen String um (mit beliebig vielen Dezimalstellen), ersetzt in diesem String dann Kommas durch Punkte (obwohl ein Komma in diesem String gar nicht vorkommen kann), und versucht dann den String wieder als Zahl zu interpretieren. Das Ergebnis sollte also wieder der ursprüngliche Zahlenwert sein. Mit anderen Worten: Die Funktion tut nichts, was man irgendwie feststellen könnte.  

>   
> > ~~~javascript

function perc1() {  

> >     r=document.getElementById("rabatt1").value;  
> >     s=document.getElementById("summe1").value;  
> >     r=kommazupunkt(r);  
> >     s=kommazupunkt(s);  
> >     erg=s*(r/100);  
> >     document.getElementById("euro1").value = erg.toFixed(2);  
> >   }

Hier rufst du kommazupunkt() mit Strings als Argument auf; es erscheint mir aber witzlos, toString() auf einen String anzuwenden. Ich bin mir nicht mal sicher, ob toString() für Strings überhaupt implementiert ist.

Woher weisst Du, ob im Eingabefeld ein String steht ?

Nenn doch deine erste Funktion ParseStringToFloat(), und lass den Aufruf von toString() am Anfang einfach weg. Dann ergibt sie nämlich Sinn: Das Argument ist die String-Darstellung eines Zahlenwertes, wahlweise mit Punkt oder Komma als Dezimalzeichen, und das Ergebnis ist der tatsächliche Zahlenwert.

Man kann den Code natürlich noch schöner verschachteln, aber so ist er für einen newbie besser lesbar (hoffe ich)

Das ist fraglich. Für mich (Programmierer seit fast 30 Jahren) sind zwei verschachtelte Funktionsaufrufe leichter nachvollziehbar, als wenn sich der Typ einer Variablen plötzlich ändert. Muss jeder selbst wissen ...

Ciao,
Martin

[Christian Kruse]

Moin Niederrheiner,

Woher weisst Du, ob im Eingabefeld ein String steht ?

Die value-Eigenschaft von einem input element ist _immer_ ein String. Siehe auch http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-6043025

LG,
 CK

[brokenbeatz]

Hallo Stephan,

das sieht ja mal um einiges Aufgeräumter aus, als bei meinem Code.
Um jedoch so vorzugehen, benötige ich ziemlich Hilfe, denn ausser den "stumpfen" Matheformeln im JS-Stil habe ich noch nicht vielmehr auf dem Schirm, sprich: Ich kann aus dem Code leider noch nicht entziffern, welche Funktion jeweils dahinter steckt...
Bsp.:
function perc1() {
    r=document.getElementById("rabatt1").value;
    s=document.getElementById("summe1").value;
    r=kommazupunkt(r);
    s=kommazupunkt(s);
    erg=s*(r/100);
    document.getElementById("euro1").value = erg.toFixed(2);
  }

Hier war ja ursprünglich euro1=rabatt1*summe1/100 gewesen, dies finde ich in deinem Code nicht, oder er ist da auch nicht enthalten?...ahhhh da hab ich ihn, oder:
r=kommazupunkt(r);
    s=kommazupunkt(s);
    erg=s*(r/100);

[brokenbeatz]

Hallo noch einmal,

ich habe versucht alles so umzusetzen, wie in deinem Code Stephan, aber es funktioniert nix :-(
Wo habe ich den Fehler?

Danke und einen schönen Abend!

<script type="text/javascript">  
function kommazupunkt(zahl) {  
    zahl=zahl.toString();  
    zahl=zahl.replace(/\,/,".");  
    zahl=parseFloat(zahl);  
    return zahl;  
  }  
  
  function perc1() {  
    r=document.getElementById("rabatt1").value;  
    s=document.getElementById("summe1").value;  
    r=kommazupunkt(r);  
    s=kommazupunkt(s);  
    erg=s*(r/100);  
    document.getElementById("euro1").value = erg.toFixed(2);  
  }  
  
  function barpreis1() {  
  	s=document.getElementById("summe1").value  
  	n=document.getElementById("nachlass1").value  
  	e=document.getElementById("euro1").value  
  	s=kommazupunkt(s);  
  	n=kommazupunkt(n);  
  	e=kommazupunkt(e);  
  	erg=s-n-e;  
  	document.getElementById("barpreis1").value = erg.toFixed(2);  
  }  
  
 function geb1() {  
    s=document.getElementById("summe1").value  
    s=kommazupunkt(s);  
	erg=s*0.1;  
    document.getElementById("geb1").value = erg.toFixed(2);  
  }  
  
  function add1() {  
 	gr=document.getElementById("gr1").value  
 	gl=document.getElementById("gl1").value  
	f=document.getElementById("fass1").value  
	d1=document.getElementById("dstgl1-1").value  
	d2=document.getElementById("dstgl1-2").value  
	s=document.getElementById("sonstg1").value  
	gr=kommazupunkt(gr);  
  	gl=kommazupunkt(gl);  
  	f=kommazupunkt(f);  
	d1=kommazupunkt(d1);  
  	d2=kommazupunkt(d2);  
  	s=kommazupunkt(s);  
	erg=gl+gr+f+d1+d2+s  
    document.getElementById("summe1").value = erg.toFixed(2);  
  }  
  function rate1() {  
	s=document.getElementById("summe").value  
	m=document.getElementById("mon1").value  
	s=kommazupunkt(s);  
	m=kommazupunkt(m);  
	erg=s/m  
	document.getElementById("rate1").value = erg.toFixed(2);  
  }  
  
</script>

[Der Niederrheiner]

Hallo noch einmal,

ich habe versucht alles so umzusetzen, wie in deinem Code Stephan, aber es funktioniert nix :-(
Wo habe ich den Fehler?

Hi,

das verstehe ich nicht ....

Habe meinen Code vor dem Posten natürlich getestet ... und er funktionierte fehlerfrei !!!

Hast Du im Browser (unter Optionen) den JavaScript-Debugger aktiviert ???? Der zeigt Dir die Zeile und die Art des Fehlers an. Nach meinem Verständnis muss der Code funktionieren.

Sind alle Objekte (IDs) vorhanden und im Code richtig geschrieben ? Ich weiß, dumme Frage, ab da halkst am häufigsten.

Was passiert, wenn 'mein' Code abläuft ? Welche Fehlermeldung ??

Gruß
Stephan

[brokenbeatz]

Hallo Stephan,

ein paar Fehler konnte ich finden, ich hatte einige ";" an den Zeilenenden vergessen. Leider hat dies nicht geklappt und auch der von Dir gesandte Code läuft nicht :-(
Im FF, JavaScript Umgebung gibt der Debugger folgende Meldung:
/*
Exception: syntax error
@Scratchpad/2:9
*/

Die Konsole: [08:37:42.723] TypeError: document.getElementById(...) is null @ file:///Users/tobias/Desktop/brillenrechner3.html:49

Hier noch einmal komplett:

<script type="text/javascript">  
function kommazupunkt(zahl) {  
   zahl=zahl.toString();  
   zahl=zahl.replace(/\,/,".");  
   zahl=parseFloat(zahl);  
   return zahl;  
  }  
  
  function perc1() {  
   r=document.getElementById("rabatt1").value;  
   s=document.getElementById("summe1").value;  
   r=kommazupunkt(r);  
   s=kommazupunkt(s);  
   erg=s*(r/100);  
   document.getElementById("euro1").value = erg.toFixed(2);  
  }  
  
  function barpreis1() {  
   s=document.getElementById("summe1").value;  
   n=document.getElementById("nachlass1").value;  
   e=document.getElementById("euro1").value;  
   s=kommazupunkt(s);  
   n=kommazupunkt(n);  
   e=kommazupunkt(e);  
   erg=s-n-e;  
   document.getElementById("barpreis1").value = erg.toFixed(2);  
  }  
  
 function geb1() {  
    s=document.getElementById("summe1").value;  
    s=kommazupunkt(s);  
    erg=s*0.1;  
    document.getElementById("geb1").value = erg.toFixed(2);  
  }  
  
  function add1() {  
    gr=document.getElementById("gr1").value;  
    gl=document.getElementById("gl1").value;  
    f=document.getElementById("fass1").value;  
    d1=document.getElementById("dstgl1_1").value;  
    d2=document.getElementById("dstgl1_2").value;  
    s=document.getElementById("sonstg1").value;  
    gr=kommazupunkt(gr);  
    gl=kommazupunkt(gl);  
    f=kommazupunkt(f);  
    d1=kommazupunkt(d1);  
    d2=kommazupunkt(d2);  
    s=kommazupunkt(s);  
    erg=gl+gr+f+d1+d2+s;  
    document.getElementById("summe1").value = erg.toFixed(2);  
  }  
  function rate1() {  
    s=document.getElementById("summe").value;  
    m=document.getElementById("mon1").value;  
    s=kommazupunkt(s);  
    m=kommazupunkt(m);  
    erg=s/m;  
    document.getElementById("rate1").value = erg.toFixed(2);  
  }  
  
</script>  
  
  
<table width="473" border="1"id="rechner">  
  <tr>  
    <td width="172">Brille</td>  
    <td width="108">Angebot 1</td>  
    <td width="76">Angebot 2</td>  
    <td width="89">Angebot 3</td>  
  </tr>  
  <tr>  
    <td>&nbsp;</td>  
    <td>&nbsp;</td>  
    <td>&nbsp;</td>  
    <td>&nbsp;</td>  
  </tr>  
  <tr>  
    <td>Glas rechts</td>  
    <td><input type="text" id="gl1" value="0"></td>  
    <td><input type="text" id="gl2"value="0"></td>  
    <td><input type="text" id="gl3"value="0"></td>  
  </tr>  
  <tr>  
    <td>Glas links</td>  
	<td><input type="text" id="gr1"value="0"></td>  
    <td><input type="text" id="gr2"value="0"></td>  
    <td><input type="text" id="gr3"value="0"></td>  
  </tr>  
  <tr>  
    <td>Fassung</td>  
	<td><input type="text" id="fass1"value="0"></td>  
    <td><input type="text" id="fass2"value="0"></td>  
    <td><input type="text" id="fass3"value="0"></td>  
  </tr>  
  
  <tr>  
    <td><p>Dienstleistung 1</p></td>  
	<td><input type="text" id="dstlg1_1"value="0"></td>  
    <td><input type="text" id="dstlg1_2"value="0"></td>  
    <td><input type="text" id="dstlg1_3"value="0"></td>  
  </tr>  
  <tr>  
    <td>Dienstleistung 2</td>  
	<td><input type="text" id="dstlg2_1"value="0"></td>  
    <td><input type="text" id="dstlg2_2"value="0"></td>  
    <td><input type="text" id="dstlg2_3"value="0"></td>  
  </tr>  
  <tr>  
    <td>sonstiges</td>  
	<td><input type="text" id="sonstg1"value="0"></td>  
    <td><input type="text" id="sonstg2"value="0"></td>  
    <td><input type="text" id="sonstg3"value="0"></td>  
  </tr>  
  <tr>  
    <td>&nbsp;</td>  
    <td>&nbsp;</td>  
    <td>&nbsp;</td>  
    <td>&nbsp;</td>  
  </tr>  
  <tr>  
    <td>Summe</td>  
    <td><input disabled type="text" id="summe1"></td>  
    <td><input type="text" id="summe2"></td>  
    <td><input type="text" id="summe3"></td>  
  </tr>  
  <tr>  
    <td>Nachla&szlig; %</td>  
	<td><input type="text" id="rabatt1"value="0"></td>  
    <td><input type="text" id="rabatt2"value="0"></td>  
    <td><input type="text" id="rabatt3"value="0"></td>  
  </tr>  
  
  <tr>  
    <td>Nachla&szlig; in &euro;</td>  
	<td><input disabled type="text" id="euro1"value="0"></td>  
    <td><input disabled type="text" name="euro2"value="0"></td>  
    <td><input disabled type="text" name="euro3"value="0"></td>  
  </tr>  
  <tr>  
    <td>Weiterer Nachlass &euro;</td>  
    <td><input type="text" id="nachlass1"value="0"></td>  
    <td><input type="text" id="nachlass2"value="0"></td>  
    <td><input type="text" id="nachlass3"value="0"></td>  
  </tr>  
  <tr>  
    <td>&nbsp;</td>  
    <td colspan="3"><div align="center">  
      <input type="button" value="berechnen" onClick="add1();perc1();barpreis1();geb1();rate1();ParseStringToFloat(zahl);">  
    </div></td>  
  </tr>  
  <tr>  
    <td>Barpreis</td>  
	<td><input disabled type="text" id="barpreis1"></td>  
    <td><input disabled type="text" id="barpreis2"></td>  
    <td><input disabled type="text" id="barpreis3"></td>  
  </tr>  
  <tr>  
  
  <tr>  
    <td>einmalige Teilnahmegeb&uuml;hr</td>  
<td><input disabled type="text" id="geb1"></td>  
    <td><input disabled type="text" id="geb2"></td>  
    <td><input disabled type="text" id="geb3"></td>  
  </tr>  
  <tr>  
    <td>&nbsp;</td>  
    <td>&nbsp;</td>  
    <td>&nbsp;</td>  
    <td>&nbsp;</td>  
  </tr>  
  <tr>  
    <td>&nbsp;</td>  
    <td>&nbsp;</td>  
    <td>&nbsp;</td>  
    <td>&nbsp;</td>  
  </tr>  
  <tr>  
    <td>utd.24 Anzahl Raten</td>  
	<td><input disabled type="text" id="mon1"value="24"></td>  
    <td><input type="text" id="mon2"value="24"></td>  
    <td><input type="text" id="mon3"value="24"></td>  
  </tr>  
  
  <tr>  
    <td>utd.24 mtl. Betrag</td>  
<td><input disabled type="text" id="rate1"></td>  
    <td><input disabled type="text" id="rate2"></td>  
    <td><input disabled type="text" id="rate3"></td>  
  </tr>  
</table>  

[Der Martin]

Hallo,

Im FF, JavaScript Umgebung gibt der Debugger folgende Meldung:
/*
Exception: syntax error
@Scratchpad/2:9
*/

dafür habe ich keine Erklärung.

Die Konsole: [08:37:42.723] TypeError: document.getElementById(...) is null @ file:///Users/tobias/Desktop/brillenrechner3.html:49

Das ist allerdings eindeutig - und du hättest uns wenigstens soweit entgegenkommen können, dass du schon mal markierst, was in deinem Code die Zeile 49 ist:

function rate1() {

s=document.getElementById("summe").value;        <- Zeile 49
    m=document.getElementById("mon1").value;
    s=kommazupunkt(s);
    m=kommazupunkt(m);
    erg=s/m;
    document.getElementById("rate1").value = erg.toFixed(2);
  }

  
Klarer Fall: Du hast gar kein Element mit der ID "summe" im Dokument. Du hast nur "summe1", "summe2" und "summe3":  
  

> ~~~html

  <tr>  

>     <td>Summe</td>  
>     <td><input disabled type="text" id="summe1"></td>  
>     <td><input type="text" id="summe2"></td>  
>     <td><input type="text" id="summe3"></td>  
>   </tr>

Also muss getElementById() an dieser Stelle fehlschlagen.

Ciao,
 Martin

[Gunnar Bittersmann]

@@Der Martin:

nuqneH

s=document.getElementById("summe").value;        <- Zeile 49
Also muss getElementById() an dieser Stelle fehlschlagen.

Erbsenalarm! getElementById() schlägt nicht fehl; es liefert null. Die darauf angewandte Eigenschaft value schlägt fehl.

Qapla'

[Der Martin]

Hallo Gunnar,

s=document.getElementById("summe").value;        <- Zeile 49
Also muss getElementById() an dieser Stelle fehlschlagen.
Erbsenalarm! getElementById() schlägt nicht fehl; es liefert null. Die darauf angewandte Eigenschaft value schlägt fehl.

ja, okay. Stimmt.
Hat mal jemand noch ein paar Erbsen zur Hand? Gunnar zählt sich gerade warm. ... ;-)

Ciao,
 Martin

[Brokenbeatz]

Hallo Martin,

erstmal ein RIESEN DANKESCHÖN!
Part1 läuft, nun habe ich den Code kopiert und mit den auf 2 geänderten IDs wieder eingefügt, leider funktioniert dies anscheinend nicht so einfach, denn es klappt nicht, es gibt einen Fehler: --
[11:24:10.206] ReferenceError: zahl is not defined @ file:///Users/tobias/Desktop/brillenrechner3.html:1
Es dürfte sich also um die erste Zeile handeln, wenn ich es richtig versteh:
function kommazupunkt(zahl) {
    zahl=zahl.toString();
    zahl=zahl.replace(/,/,".");
    zahl=parseFloat(zahl);
    return zahl;
  }

Nur wieso funktioniert es im Bereich der IDs mit 1?
Braucht ihr noch einmal den kompletten Code?

Danke,

Tobias

[Der Niederrheiner]

Hi,

schön, dass Du ein paar Fehler gefunden hast. Tatsächlich lag es an meiner Vermutung, dass da nicht alle IDs gesetzt waren (das ist einer der häufigsten Programmierfehler).

Leider hatte ich gestern keine Zeit mehr, aber die anderen haben Dir ja dann weitergeholfen.
Geht's jetzt ??

Eine Schwäche hat mein Konstrukt, vielleicht ist das auch jetzt dein Problem :
Wenn das abgeruefene Feld mit "docGetElemById" leer ist, oder, noch schlimmer, ein Buchstabe, dann knallts...

Du müsstest also abfragen : if(zahl=='') { zahl=0; }

Bei Buchstaben darf ja auch nix passieren, die müsstest Du mit : if(isNaN(zahl)) {....}
irgendwie abfangen.

beste Grüße
Stephan

P.S.
Ich weiß, ich trete jetzt eine Grundsatzdiskussion los !!! :o)
Aber in der Entwicklung ist der IE mit eingeschaltetem Script-Debugging die bessere Alternative !

[brokenbeatz]

Danke schon einmal! Mein Problem ist, das ichnicht genau weiß an welchen Stellen die Codes einzusetzen sind...:-)

um kaufmännisch auf 2 Stellen zu runden, benutze ich folgenden Trick :

Zahl * 100  nehmen, dann mit Math.round() ganzzahlig runden und wieder durch 100 teilen

Bsp:  1,2534 €

mal 100  = 125,34

Math.round() = 125

geteilt 100 = 1,25

---

für Komma gegen Punkt schau mal nach "search" und "replace" im selfhtml

Stephan

[unknown]

http://forum.jswelt.de/javascript/58225-zweistellig-kaufm-nnisch-runden-and-komma-statt-punkt-eingeben.html#post370775

[Brokenbeatz]

Ist richtig, ich habe auch in einem weiteren Forum nachgefragt, habe aber die wirklich tollen Antworten hier erhalten :-) Ich hoffe kein Bruch der Regeln?

http://forum.jswelt.de/javascript/58225-zweistellig-kaufm-nnisch-runden-and-komma-statt-punkt-eingeben.html#post370775

[Der Martin]

Hallo,

http://forum.jswelt.de/javascript/58225-zweistellig-kaufm-nnisch-runden-and-komma-statt-punkt-eingeben.html#post370775
Ist richtig, ich habe auch in einem weiteren Forum nachgefragt, habe aber die wirklich tollen Antworten hier erhalten :-) Ich hoffe kein Bruch der Regeln?

das nicht, aber wenn man schon mehrgleisig fährt und dieselbe Frage in mehreren Foren stellt (daran finde ich im Prinzip nichts Verwerfliches), dann ist es nur fair, das auch zu erwähnen. So vermeidet man, dass die Leser in den verschiedenen Foren unabhängig voneinander denselben "Aufwand" mehrfach betreiben.

Ciao,
 Martin

[Broken Beatz]

Hallo an euch alle!
Danke für eure Hilfe! Dank dieser klappt das Script soweit. Nur habe ich nun ein weiteres Problem, welches ich jedoch separat gepostet habe: Javascript wird nur teils berechne

Gerne stelle ich den finalen Code zur weiteren Verfügung hier bereit.

Einen schönen Sonntag,

Tobias