Eingabe -> Berechnung -> Ausgabe (im Firefox funktionierts im IE nicht)

berliner345 · 5 Mai 2011

Hallo!

Ich hab mal eine kurze Frage, ich sitz hier für einen Bekannten am PC und möchte ihm seine Gleichung für eine Preisberechnung etwas verbessern/erweitern.
Nun ja .. Ich bin Azubi zum FI für Systemintegration - programmieren ist jetzt nicht sooo meine Stärke.

Nachdem man die Werte angegeben bzw. eingetragen hat, klickt man auf "Berechnen" und darunter wird dann die Tabelle gefüllt.
Im Firefox klappt das alles ja auch ganz gut .. aber im Internet Explorer leider nicht (beide auf neuestem Stand).
Wahrscheinlich könnte man viiieell weniger Code schreiben, aber das ist nicht schlimm, die Länge ist egal. Bitte mich jetzt nicht backpfeifen, was das für ein umständlicher Code ist, das weiß ich selber.
Könnte mir bitte nur jmd sagen - falls es möglich ist - was abgeändert werden muss, damit das Script auch im IE durchläuft?!

HTML:

<div align=left>Jede Treppe ist einzigartig. Hier finden Sie nur eine grobe Übersicht und die angegeben Preise sind noch unverbindlich. Ein verbindlicher Kostenvoranschlag ist nach einem Hausbesuch mit Beratung und Aufmaß möglich. Jedoch möchten wir Ihnen die Möglichkeit bieten unseren Kalkulator als Orientierung zu nutzen.</div>
<p><table border="0">
<tbody>
<tr>
<td><strong>Länge der Treppe</strong><br /></td>
<td><strong>Breite der Treppe</strong></td>
<td><strong>Material der Treppe</strong><br /></td>
</tr>
<tr>
<td valign="top"><span><span style="font-size: small;"><span class="ff2 fc0 fs12 ">Die Treppenlänge wird vom  Rand der ersten Stufe bis zum Boden gemessen. Nutzen Sie bitte hierzu  ein Metermaß oder einen Zollstock. Der angefangene Meter zählt als  voller Meter!<br />Bitte geben Sie nur ganze Zahlen ein.</span><span class="ff1 fc0 fs10 "> </span></span></span></td>
<td valign="top"><span><span style="font-size: small;"><span class="ff2 fc2 fs12 ">Die Breite der Treppe muss  mindestens 80 cm betragen. Gemessen wird von der Treppenwange zur  Treppenwange oder von je nach baulicher Gegebenheit von der Treppenwange  zum Treppengeländer</span></span></span></td>
<td valign="top"><span><span style="font-size: small;"><span class="ff2 fc2 fs12 ">Bitte geben Sie hier das Fertigungsmaterial Ihrer Treppe ein.<br />Sollte die Treppe gefliest sein oder aus anderen Steinarten wie z.B. Marmor bestehen, wählen Sie im Auswahlfeld Stein.</span><span class="ff3 fc0 fs10 "> </span></span></span></td>
</tr>
</tbody>
</table><p>
<script type="text/javascript"><!--
    function add() {
if (document.formular.typ[0].checked == true)
{        
        document.formular.bezeichnung.value = "Bezeichnung";
    document.formular.preis.value = "Preis";
    document.formular.grundpreis5.value = "Grundpreis";
    document.formular.materialkosten.value = "zzgl. Materialkosten";
    document.formular.laenge.value = "zzgl. Länge";
    document.formular.kurven.value = "zzgl. Kurven";
    document.formular.gesamtpreis.value = "Gesamtpreis";

        zahl3 = Number(document.formular.zahl2.value);
        zahl4 = Number("249");
    grundpreis = Number("1490");
        ergebnis2 = zahl3 * zahl4;
            
    if (document.formular.auswahl[0].checked == true)
    {
    ergebnis3 = Number("0");
    }
    else if (document.formular.auswahl[1].checked == true)  
    {
    ergebnis3 = Number("99");
    }
        else if (document.formular.auswahl[2].checked == true)  
    {
    ergebnis3 = Number("199");
    }
    
        ergebnis = ergebnis2 + ergebnis3 + grundpreis;

    document.formular.grundpreisausgabe.value = grundpreis + " €";
        document.formular.laengeausgabe.value = ergebnis2 + " €";
        document.formular.materialausgabe.value = ergebnis3 + " €";
        document.formular.kurvenausgabe.value = "entfällt";
        document.formular.ergebnisausgabe.value = ergebnis + " €" + " *inkl. MwSt, zzgl. Anfahrts- und Installationskosten, abzgl. Zuschuss der Pflegekasse";

}
if (document.formular.typ[1].checked == true)
{
        document.formular.bezeichnung.value = "Bezeichnung";
    document.formular.preis.value = "Preis";
    document.formular.grundpreis5.value = "Grundpreis";
    document.formular.materialkosten.value = "zzgl. Materialkosten";
    document.formular.laenge.value = "zzgl. Länge";
    document.formular.kurven.value = "zzgl. Kurven";
    document.formular.gesamtpreis.value = "Gesamtpreis";

    zahl1 = Number(document.formular.zahl1.value);
        zahl2 = Number("1290");
    grundpreis = Number("3990");
        ergebnis1 = zahl1 * zahl2;
            
        zahl3 = Number(document.formular.zahl2.value);
        zahl4 = Number("249");
        ergebnis2 = zahl3 * zahl4;
            
    if (document.formular.auswahl[0].checked == true)
    {
    ergebnis3 = Number("0");
    }
    else if (document.formular.auswahl[1].checked == true)  
    {
    ergebnis3 = Number("99");
    }
        else if (document.formular.auswahl[2].checked == true)  
    {
    ergebnis3 = Number("199");
    }

        ergebnis = ergebnis1 + ergebnis2 + ergebnis3 + grundpreis;

    document.formular.grundpreisausgabe.value = grundpreis + " €";
        document.formular.laengeausgabe.value = ergebnis2 + " €";
        document.formular.materialausgabe.value = ergebnis3 + " €";
        document.formular.kurvenausgabe.value = ergebnis1 + " €";
        document.formular.ergebnisausgabe.value = ergebnis + " €" + " *inkl. MwSt, zzgl. Anfahrts- und Installationskosten, abzgl. Zuschuss der Pflegekasse";
}
if (document.formular.typ[2].checked == true)
{
        document.formular.bezeichnung.value = "Bezeichnung";
    document.formular.preis.value = "Preis";
    document.formular.grundpreis5.value = "Grundpreis";
    document.formular.materialkosten.value = "zzgl. Materialkosten";
    document.formular.laenge.value = "zzgl. Länge";
    document.formular.kurven.value = "zzgl. Kurven";
    document.formular.gesamtpreis.value = "Gesamtpreis";

        zahl1 = Number(document.formular.zahl1.value);
        zahl2 = Number("1290");
    grundpreis = Number("6990");
        ergebnis1 = zahl1 * zahl2;
            
        zahl3 = Number(document.formular.zahl2.value);
        zahl4 = Number("449");
        ergebnis2 = zahl3 * zahl4;
            
    if (document.formular.auswahl[0].checked == true)
    {
    ergebnis3 = Number("0");
    }
    else if (document.formular.auswahl[1].checked == true)  
    {
    ergebnis3 = Number("99");
    }
        else if (document.formular.auswahl[2].checked == true)  
    {
    ergebnis3 = Number("199");
    }

        ergebnis = ergebnis1 + ergebnis2 + ergebnis3 + grundpreis;

    document.formular.grundpreisausgabe.value = grundpreis + " €";
        document.formular.laengeausgabe.value = ergebnis2 + " €";
        document.formular.materialausgabe.value = ergebnis3 + " €";
        document.formular.kurvenausgabe.value = ergebnis1 + " €";
        document.formular.ergebnisausgabe.value = ergebnis + " €" + " *inkl. MwSt, zzgl. Anfahrts- und Installationskosten, abzgl. Zuschuss der Pflegekasse";
}
}
    //--></script>
<form name="formular">
<p><div align="left">Bitte geben Sie die Art des gewünschten Treppenlifts an:</div>
<div align="left"><input type="radio" name="typ" value="" border="0">&nbsp;Gerade</div>
<div align="left"><input type="radio" name="typ" value="" border="0">&nbsp;Kurvig</div>
<div align="left"><input type="radio" name="typ" value="" border="0">&nbsp;Plattform</div></p>


<p><div align="left">Bitte geben Sie das Material Ihrer Treppe an:</div>
<div align="left"><input type="radio" name="auswahl" value="" border="0">&nbsp;Holz</div>
<div align="left"><input type="radio" name="auswahl" value="" border="0">&nbsp;Beton&nbsp;(zzgl. 99€)</div>
<div align="left"><input type="radio" name="auswahl" value="" border="0">&nbsp;Stein&nbsp;(zzgl. 199€)</div></p>


<p><div align="left">Bitte geben Sie die Länge der Treppe an:</div>
<input name="zahl2" type="text" size="3" maxlength="3">&nbsp; m</p>


<p><div align="left">Bitte geben Sie die Anzahl der Kurven an (wird beim geraden Treppenlift ignoriert):</div>
<input name="zahl1" type="text" size="3" maxlength="3"></p>

<input type="button" value="Berechnen" onclick="add()">
<div>&nbsp;</div>
<p><table border="0">
<tr>
<th align="left" valign="top" width="300"><output type="text" name="bezeichnung"></th>
<th align="left" valign="top" width="400"><output type="text" name="preis"></th>
</tr>
<tr>
<td align="left" valign="top">
<div><output type="text" name="grundpreis5">&nbsp;</div>
<div><output type="text" name="materialkosten">&nbsp;</div>
<div><output type="text" name="laenge">&nbsp;</div>
<div><output type="text" name="kurven">&nbsp;</div>
<div><b><output type="text" name="gesamtpreis"></b>&nbsp;</div>
</td>
<td align="left" valign="top">
<div><output type="text" name="grundpreisausgabe">&nbsp;</div>
<div><output type="text" name="materialausgabe">&nbsp;</div>
<div><output type="text" name="laengeausgabe">&nbsp;</div>
<div><output type="text" name="kurvenausgabe">&nbsp;</div>
<div><b><output type="text" name="ergebnisausgabe">&nbsp;</b></div>
</td>
</tr>
</table></p>

</form>

Danke und liebe Grüße
berliner345

threadi · 6 Mai 2011

Niemand wird dir deinen Code verbessern. Wir könnten dir höchstens helfen bei der Problemanalyse, so dass Du es selbst lösen kannst. Was passiert denn im IE? Was sagt dort die JavaScript-Fehlerkonsole?

Gilles · 6 Mai 2011

Im Firefox funktionierts bei dir?
Bei mir nicht. Und zwar aus folgendem Grund. Innerhalb eines THs gehört ein td. Und noch etwas. Es gibt kein output Element

Dieses Element heisst input ;) Und das kannst du auch in dem Fall auch gerne zur Ausgabe benutzen :) Wenn du das beachtest sollte das ganze laufen.
Und nebenbei. Du musst nicht zwingend in inputs schreiben. du kannst deinen Elementen ids vergeben und kannst so auf sie zugreifen.
uzm Beispiel:

HTML:

<table>
  <th>
    <td id="bezeichnung"></td>
  </th>
</table>

<input id="preis" type="text" />

Code:

document.getElementById("bezeichnung").innerHTML = "Das ist die Bezeichnung";
document.getElementById("preis").value = "Super billig";

Du musst drauf achten, dass es Felder gibt, die eine Value haben und manche kannst du per innerHTML "beschreiben". :)

struppi · 6 Mai 2011

Gilles schrieb:
Und zwar aus folgendem Grund. Innerhalb eines THs gehört ein td.

Nein, das ist falsch.

Gilles · 6 Mai 2011

struppi schrieb:
Nein, das ist falsch.

Zu voreilig. War wohl noch etwas zu früh für mich

Ich nehm Alles zurück. Habe da an tr gedacht. Dort gehört nämlich ein th oder ein td rein.
Nehm ich auf meine Kappe das Ganze :) Danke für die Korrektur.

berliner345 · 6 Mai 2011

Hey vielen Dank an alle, hat mir schon mal sehr weitergeholfen. Es wird jetzt alles Benötigte ausgegeben, eine Frage habe ich da allerdings noch.

Zu dem input (/output), das ich output schrieb hatte den Grund darin, dass ich somit in der Ausgabe nicht diese hässligen Felder dabei hatte, sondern reinen Text. Nun scheint es ja auch output nicht zu geben .. muss ich also input nehmen, gibt es denn eine Möglichkeit das klassische "Eingabefeld-Design" auszublenden??

Gruß
berliner345

threadi · 7 Mai 2011

Falls Du dich auf ein input-Feld beziehst: dieses lässt sich (mit Ausnahme des input-type-file) nahezu komplett stilistisch per CSS bearbeiten. Beispiel:

Code:

input { border: 0; background-color: red; }

berliner345 · 7 Mai 2011

Vielen Dank!
Funktioniert jetzt alles!

Schönes Wochenende!
berliner345

Eingabe -> Berechnung -> Ausgabe (im Firefox funktionierts im IE nicht)

berliner345

Neues Mitglied

threadi

Moderator

Gilles

Blogger

struppi

Guest

Gilles

Blogger

berliner345

Neues Mitglied

threadi

Moderator

berliner345

Neues Mitglied

Neueste Beiträge