Login

tebn · 24.11.2022, 19:14

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 ?

***admin*** · 25.11.2022, 01:13

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

***admin*** · (Dieser Beitrag wurde zuletzt bearbeitet: 06.12.2022, 03:13 von admin.)

Habe noch anderes Beispiel gefunden, was deiner Vorstellung näher kommt
https://basti1012.bplaced.net/index.php?...rum&id=817

***rzscout*** · 25.11.2022, 11:44

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:

Code:
<!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

Login
Benutzername:
Passwort:	Passwort vergessen?
	Merken