Javascript-forum
Preis Tabellen - Druckversion

+- Javascript-forum (https://javascript-forum.de)
+-- Forum: Entwicklung (https://javascript-forum.de/Forum-entwicklung--4)
+--- Forum: Javascript (https://javascript-forum.de/Forum-thema-javascript--6)
+--- Thema: Preis Tabellen (/Thread-thema-preis-tabellen--1879)



Preis Tabellen - tebn - 24.11.2022

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 ?


RE: Preis Tabellen - admin - 25.11.2022

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?ordner=html&id=179


RE: Preis Tabellen - admin - 25.11.2022

Habe noch anderes Beispiel gefunden, was deiner Vorstellung näher kommt
https://codepen.io/basti1012/pen/NWjLZNN


RE: Preis Tabellen - rzscout - 25.11.2022

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