Gesamtpreis berechnen mit Checkboxen und Auswahllisten

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:

Bestellung
     <img src=C:\Users\Tamara\Desktop/pizza.jpg width="1325" height="307"><br>
Home Restaurant Bestellung
  <h1>Hier können Sie Ihre Wunschpizza bestellen:</h1><br><br>

  <h2>Größe:</h2>
     <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>
     <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>
     <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>
     <h2>Ihre Lieferungsoptionen:</h2>
     <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>
     <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">

Vielen Dank schon Mal!

Die Anpassung und den Resetbutton überlasse ich dir.
[HTML]

Document

Pizzabestellung

Größe wählen Standard (€ 4,50) Maxi (€ 6,-)

Extras wählen

Salami (€ 1,-)
Schinken (€ 1,50)
Thunfisch (€ 2,-)
Zustellung Selbst abholen Lieferung Zone 1 (10% Aufschlag) Lieferung Zone 2 (20% Aufschlag)
Berechnen
$(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>
[/HTML]

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.

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

Wohl eher nicht, nutze relative Pfade

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

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?

Okay danke Sempervivum:)

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.

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

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:

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

statt so mit absolutem Pfad:

<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.

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?

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.

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

dankeschön ich glaube es hat so funktioniert :slight_smile:
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?:frowning:

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

PS: Und hier: preis; fehlt das „var“ davor.

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

Vielen Dank an alle, ist abgegeben :slight_smile: