Gesamtpreis berechnen mit Checkboxen und Auswahllisten

td0508 · 9 Januar 2016

Hallo,
ich habe von der Schule aus den Auftrag eine dynamische Webseite zu gestalten, die die Kosten für eine Bestellung bei einem Pizza-Lieferservice ermittelt.
Hierbei sollen Größe, Beläge und Lieferoption gewählt werden.
Da wir noch ziemlich am Anfang sind mit Webseiten und bisher nichts mit Preise berechnen gemacht haben,
habe ich große Probleme damit die variablen in der function zu definieren und die Formel mit der ich meinen Gesamtpreis ausgeben kann zu bestimmen.
Ich hoffe jemand kann mir helfen, da ich wirklich verzweifelt bin.

Mein Quelltext dazu sieht folgendermaßen aus:
<title>Bestellung</title>
<meta name="author" content="Tamara">
<meta name="editor" content="html-editor phase 5">

<script language="JavaScript">
function berechnePreis(){

preis;

if(document.bestellung.Groesse.value==0){
preis = 4.50;
}
else{
if(document.bestellung.Groesse.value==1){
preis = 6.00;
}
else{
preis = 8.00;
}
}

if(document.bestellung.Pilze.checked==true){
preis = preis + 0.5/1;
}

if(document.bestellung.Salami.checked==true){
preis = preis + 0.8/1;
}

if(document.bestellung.Schinken.checked==true){
preis = preis + 1/1;
}

if(document.bestellung.Artischocken.checked==true){
preis = preis + 1.2/1;
}

if(document.bestellung.Peperoni.checked==true){
preis = preis + 0.8/1;
}

if(document.bestellung.Zwiebeln.checked==true){
preis = preis + 0.5/1;
}

if(document.bestellung.Thunfisch.checked==true){
preis = preis + 1.2/1;
}

if(document.bestellung.Meeresfrüchte.checked==true){
preis = preis + 2/1;
}

if(document.bestellung.Sardellen.checked==true){
preis = preis + 1.5/1;
}

if(document.bestellung.Lieferoption.value==0){
preis = preis * 0.9;
}
else{
if(document.bestellung.Lieferoption.value==1){
preis = preis * 1.1;
}
else{
preis = preis * 1.15;
}
}

document.bestellung.endpreis.value=preis;

window.alert("Der Preis beträgt: " + preis + "Euro");

}

</script>
</head>
<body text="#000000" bgcolor="#FCE89C" link="#FF0000" alink="#FF0000" vlink="#FF0000">

<form name="bestellung">

<img src=C:\Users\Tamara\Desktop/pizza.jpg width="1325" height="307"><br>

<table border=2>
<tr>
<td><a href=pizzapalace.html>Home</a></td>
<td><a href=restaurant.html>Restaurant</a></td>
<td><a href=bestellung.html><b>Bestellung</b></a></td>
</tr>
</table>

<h1>Hier können Sie Ihre Wunschpizza bestellen:</h1><br><br>

<h2>Größe:</h2>

<table border=2>

<tr>
<td>Piccolo</td>
<td>20cm</td>
<td>4,50</td>
</tr>

<tr>
<td>Medio</td>
<td>26cm</td>
<td>6,50</td>
</tr>

<tr>
<td>Grande</td>
<td>36cm</td>
<td>8,00</td>
</tr>

</table>

<h4><i>*einschließlich Käse und Tomaten als Belag</i></h4><br><br>

<h2>Bitte wählen Sie Ihre gewünschte Größe:</h2>

<select name="Groesse" size="3">
<option value=0>Piccolo</option>
<option value=1>Medio</option>
<option value=2>Grande</option>
</select>

<h2>Wählen Sie Ihre gewünschten Beläge:</h2>

<table border=2>

<tr>
<td>Pilze</td>
<td>0,50</td>
<td><input type="checkbox" name="Pilze"></td>
</tr>

<tr>
<td>Salami</td>
<td>0,80</td>
<td><input type="checkbox" name="Salami"></td>
</tr>

<tr>
<td>Schinken</td>
<td>1,00</td>
<td><input type="checkbox" name="Schinken"></td>
</tr>

<tr>
<td>Artischocken</td>
<td>1,20</td>
<td><input type="checkbox" name="Artischocken"></td>
</tr>

<tr>
<td>Peperoni</td>
<td>0,80</td>
<td><input type="checkbox" name="Peperoni"></td>
</tr>

<tr>
<td>Zwiebeln</td>
<td>0,50</td>
<td><input type="checkbox" name="Zwiebeln"></td>
</tr>

<tr>
<td>Thunfisch</td>
<td>1,20</td>
<td><input type="checkbox" name="Thunfisch"></td>
</tr>

<tr>
<td>Meeresfrüchte</td>
<td>2,00</td>
<td><input type="checkbox" name="Meeresfrüchte"></td>
</tr>

<tr>
<td>Sardellen</td>
<td>1,50</td>
<td><input type="checkbox" name="Sardellen"></td>
</tr>

</table>

<h2>Ihre Lieferungsoptionen:</h2>

<table border=2>

<tr>
<td>Selbstabholung</td>
<td>10% Nachlass</td>
</tr>

<tr>
<td>Zone 1</td>
<td>10% Zuschlag</td>
</tr>

<tr>
<td>Zone 2</td>
<td>10% Zuschlag</td>
</tr>

</table>

<h2>Bitte wählen Sie Ihre gewünschte Lieferoption:</h2>

<select name="Lieferoption" size="3">
<option value=0>Selbstabholung</option>
<option value=1>Zone 1</option>
<option value=2>Zone 2</option>
</select>

<input type="button" value="Preis berechnen" onclick="berechnePreis()"><br>

Preis:
<input type="label" name="endpreis"><br>

<input type="reset" value="Warenkorb leeren">

</form>
</body>
</html>

Vielen Dank schon Mal!

Tronjer · 9 Januar 2016

Die Anpassung und den Resetbutton überlasse ich dir.

HTML:

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>
    <div class="container">
        <h1>Pizzabestellung</h1>
        <form>
            <div class="form-group">
                <label>Größe wählen</label>
                <select class="form-control size">
                    <option value="4.5" selected>Standard (€ 4,50)</option>
                    <option value="6">Maxi (€ 6,-)</option>
                </select>
            </div>
            <p><strong>Extras wählen</strong></p>
            <div class="checkbox">
                <label><input type="checkbox" name="toppings" value="1">Salami (€ 1,-)</label>
            </div>
            <div class="checkbox">
                <label><input type="checkbox" name="toppings" value="1.5">Schinken (€ 1,50)</label>
            </div>
            <div class="checkbox">
                <label><input type="checkbox" name="toppings" value="2">Thunfisch (€ 2,-)</label>
            </div>
            <div class="form-group">
                <label>Zustellung</label>
                <select class="form-control options">
                    <option value="1" selected>Selbst abholen</option>
                    <option value="1.1">Lieferung Zone 1 (10% Aufschlag)</option>
                    <option value="1.2">Lieferung Zone 2 (20% Aufschlag)</option>
                </select>
            </div>
            <button type="submit" class="btn btn-primary">Berechnen</button>
        </form>
    </div>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script>
    $(function() {
        $('form').on('submit', function(e) {
            e.preventDefault();
            var size = Number($('.size').val()),
                    options = Number($('.options').val()),
                    toppings = 0,
                    calculatePrice = function(a,b,c) {
                        return ((a + b) * c).toFixed(2);
                    };

            $.each($('input[name="toppings"]'), function(i,v) {
                if ($(this).prop('checked')) {
                    toppings += Number(v.value);
                }
            });

            alert('Preis: € ' + calculatePrice(size, toppings, options));
        });
    });
    </script>
</body>
</html>

NetAktiv · 9 Januar 2016

Sorry, aber wenn da einer sagt, ich bin absoluter Beginner, dann Frage ich mich echt, was es soll, hier eine fertige und undokumentierte Lösung hinzuknallen, die noch auf Frameworks wie Bootstrap und jQuery zurückgreift und selbst noch ein Objekt definiert. Tronjer, frage dich doch mal selbst, ob du deine Lösung am Beginn deiner Karriere verstanden hättest. Davon abgesehen denke ich immer, es ist besser, den Fragenden Schritt für Schritt an die Lösung zu führen, dann lernt er mehr (auch über das Lösen von Problemen im Allgemeinen), als ihm eine superelegante fertige Lösung zu kreieren.

td0508 · 9 Januar 2016

Danke Tronjer für deine Antwort,leider habe ich dein Script nicht verstanden, allerdings hat es sich geklärt. Ich weiß zwar nicht wie aber es funktioniert jetzt.
Kann mir vielleicht sagen ob mein Lehrer die Webseite wenn die Dateipfade auf meinen Laptop ausgerichtet sind trotzdem wenn ich ihm einen Ordner mit allem schicke sehen kann wie es tatsächlich aussieht?

Liebe Grüße

bdt600 · 9 Januar 2016

Wohl eher nicht, nutze relative Pfade

Sempervivum · 9 Januar 2016

Informiere dich über relative Adressierung, z. B. hier:
https://wiki.selfhtml.org/wiki/HTML/Links/Referenzieren_in_HTML

td0508 · 9 Januar 2016

Was soll das heißen relative Pfade? Kann er den Pfad nicht auf seinem PC ändern damit er die Bilder angezeigt bekommt?
Ist doch sowieso davon abhängig wo er sie selbst speichert oder?

td0508 · 9 Januar 2016

Okay danke Sempervivum:)

Sempervivum · 9 Januar 2016

Was soll das heißen relative Pfade? Kann er den Pfad nicht auf seinem PC ändern damit er die Bilder angezeigt bekommt?

Der TO schrieb:

wenn die Dateipfade auf meinen Laptop ausgerichtet sind

Das habe ich so verstanden, dass er absolute Pfade auf dem lokalen Dateisystem verwendet. Er schreibt nichts davon, dass er Probleme mit der Anzeige seiner Bilder hat.

td0508 · 9 Januar 2016

Habe es mir durchgelesen aber leider trotzdem nicht verstanden wie ich nun die Dateipfade in meinem Script anpassen soll:(

Sempervivum · 9 Januar 2016

Angenommen deine HTML-Datei liegt in D:\pfad1\meinewebsite\ und deine Bilder in D:\pfad1\meinewebsite\bilder\. Dann musst Du das Bild so adressieren mit relativem Pfad:

Code:

<img src="bilder/bild1.jpg">

statt so mit absolutem Pfad:

Code:

<img src="file:///D:/pfad1/meinewebsite/bilder/bild1.jpg">

und analog für Links etc.
Voraussetzung ist, dass sich alle Dateien, die deine HTML-Datei verwendet unterhalb des Pfades dieser Datei befinden.

td0508 · 9 Januar 2016

Das heißt ich nehme beispielsweise Bilder als Pfad da er auch die Bilder in seinen Ordner Bilder legen kann ? Oder bin ich da auf dem falschen weg?

Sempervivum · 9 Januar 2016

Ja, das war nur ein Beispiel. Die Bilder können genau so gut im selben Pfad wie die HTML-Datei liegen, dann würde man sie einfach mit "bild1.jpg" adressieren. Der TO braucht nichts im Dateisystem zu ändern, sondern nur die Adressen in der HTML-Datei muss er so ändern, dass sie relativ sind. Kann man wahrscheinlich sehr leicht mit einem dateiweiten Ersetzen machen.

Tronjer · 9 Januar 2016

Wozu gibt es Image Hoster? Lade die Bilder hoch: http://www.directupload.net und füge die Links in der Datei ein.

Anstatt dem Prof einzelne Dateien zu senden, kannst du ihn auch hier auf die Spielwiese schicken.
http://codepen.io/anon/pen/WrjLzv

td0508 · 10 Januar 2016

dankeschön ich glaube es hat so funktioniert :-)
Weiß jemand an was es liegen könnte wenn der Preis in der Vorschau im
HTML Editor ausgerechnet wird also alles so funktioniert wie es soll aber wenn ich die Seite im Ordner öffne geht nichts davon?:-(

Sempervivum · 10 Januar 2016

AFAIK benutzte Phase5 den Internet Explorer für die Vorschau. Welchen Browser benutzt du, wenn Du es aus dem Ordner heraus öffnest?
Dieses hier <script language="JavaScript"> ist veraltet, benutze besser <script type="text/javascript">. Ich glaube aber eher nicht, dass es daran liegt, weil die Browser i. allg. robust gegenüber solchen Dingen robust sind.

Sempervivum · 10 Januar 2016

PS: Und hier: preis; fehlt das "var" davor.

Sempervivum · 10 Januar 2016

PPS: Vermeide Sonderzeichen (Umlaute) in Variablen- und Attribut-Namen: "Meeresfrüchte".
Und mache dich mit der Konsole vertraut, die zeigt solche Fehler an.

td0508 · 11 Januar 2016

Vielen Dank an alle, ist abgegeben :-)

Gesamtpreis berechnen mit Checkboxen und Auswahllisten

td0508

Neues Mitglied

Tronjer

Senior HTML'ler

NetAktiv

Senior HTML'ler

td0508

Neues Mitglied

bdt600

Guest

Sempervivum

Guest

td0508

Neues Mitglied

td0508

Neues Mitglied

Sempervivum

Guest

td0508

Neues Mitglied

Sempervivum

Guest

td0508

Neues Mitglied

Sempervivum

Guest

Tronjer

Senior HTML'ler

td0508

Neues Mitglied

Sempervivum

Guest

Sempervivum

Guest

Sempervivum

Guest

td0508

Neues Mitglied

Neueste Beiträge