Themabewertung:
  • 0 Bewertung(en) - 0 im Durchschnitt
  • 1
  • 2
  • 3
  • 4
  • 5
Preis Tabellen
#1
Hallo,

ich habe für meine Website eine Tabelle über Preise und Leistungen erstellt. Jetzt möchte ich mir den gesamtpreis mit JavaScript ausrechnen lassen  wenn die jeweilige Leistung durch eine Checkbox angeklickt wurde.

Bsp:

Motor 50€          "checkbox"
Getriebe 10€       "checkbox"
Glass 5€             "checkbox"
Tasche 10€         "checkbox"

Jetzt soll man durch Checkboxen zum Beispiel nur Motor und Glass anklicken können und der Preis von 55€ soll im einen Feld erscheinen.

Ich habe schon geschafft das JavaScript die zahlen ausliest, jedoch fehlt mir der Ansatz für die Funktion mit der Verlinkung zu den einzelnen checkboxen.
Kann mir jemand weiterhelfen ?


Angehängte Dateien
.js   rechnung.js (Größe: 430 Bytes / Downloads: 1)
.html   preise.html (Größe: 1,98 KB / Downloads: 1)
Zitieren
#2
sowas in der Art hatte ich schon mal im anderen Forum.
Ist etwas größer , aber das kannst du dir ja sicherlich selber anpassen wie du es brauchst, oder ?
https://basti1012.bplaced.net/index.php?...tml&id=179
tebn likes this post
Hier sind alle meine Lösungen aus allen Foren. Ich helfe auch in Facebook-chat
Zitieren
#3
Habe noch anderes Beispiel gefunden, was deiner Vorstellung näher kommt
https://codepen.io/basti1012/pen/NWjLZNN
tebn likes this post
Hier sind alle meine Lösungen aus allen Foren. Ich helfe auch in Facebook-chat
Zitieren
#4
Hi tebn,

du bekommst natürlich auch eine Version von mir. Meines Erachtens solltest du einen anderen weg gehen und lieber Varaiblen nehmen zum zusammenrechnen anstatt Elemente.

Hier meine Version:
<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="Style.css">
    <title>Preise</title>
    <script>
        // Deklaration von Variablen um von überall darauf zugreifen zu können
        var motor, rest, lack, summe, gesamt = 0;
        //Führt den Skript aus, wenn der DOM geladen wurde.
        document.addEventListener('DOMContentLoaded', function() {
            //Weist Variablen zu
            motor = document.getElementById('motor'); rest = document.getElementById('rest');
            lack = document.getElementById('lack'); summe = document.getElementById('summe');
            motor.addEventListener('change', berechne1);
            rest.addEventListener('change', berechne2);
            lack.addEventListener('change', berechne3);
        });
        function berechne1() {
            if(motor.checked == true) {
                gesamt = gesamt + 50;
            } else {
                gesamt = gesamt - 50;
            }
            printErgebnis();
        }
        function berechne2() {
            if(rest.checked == true) {
                gesamt = gesamt + 50;
            } else {
                gesamt = gesamt - 50;
            }
            printErgebnis();
        }
        function berechne3() {
            if(lack.checked == true) {
                gesamt = gesamt + 50;
            } else {
                gesamt = gesamt - 50;
            }
            printErgebnis();
        }
        function printErgebnis() {
            summe.value = gesamt;
        }
    </script>
</head>
<body>
    <nav>
        <ul class="mitte">
          <li><a href="index.html">Home</a></li>
          <li><a href="preise.html">Preise</a></li>
          <li><a href="treffen.html">Treffen</a></li>
          <li><a>Service</a>
              <ul>
                <li><a href="restaurierung.html">Restaurierung/Instandetzubg</a></li>
                <li><a href="motorinstandsetzung.html">Motorregeneration</a></li>
              </ul>
          </li>   
          <li><a href="/">Metallgestaltung</a></li>
          </ul>
      </nav>
      <div > <h2>Arbeitskosten</h2>
        <table id="rechnung">
            <tr>
                <th>Leistungen</th>
                <th> Preis</th>
                <th>Preis</th>
                <th>Preis</th>
                
            </tr>
            <tr>
                <td>Motorinstandsetzung</td> 
                <td id="addition1">5</td>
                <td></td> 
                <td></td>
                <td><input type="checkbox" id="motor"></td>

           </tr>
            <tr>
                <td>Komplette restaurierung </td>
                <td id="addition3">7</td>
                <td></td> 
                <td></td>
                <td><input type="checkbox" id="rest"></td>
            </tr>
            <tr>
                <td>Lackierung/Ovatrol-Behandlung</td>
                <td id="addition4">7</td>
                <td></td>
                <td></td>
                <td><input type="checkbox" id="lack"></td>
            </tr>
        </table>
        <output id="summe"></output>
</body>
</html>

Viel Erfolg

rzscout
tebn likes this post
"Gerne dürft ihr mir eine gute Bewertung da lassen aber auch gegenüber Kritik bin ich offen" Angel
Zitieren


Gehe zu:


Benutzer, die gerade dieses Thema anschauen: 1 Gast/Gäste