Beiträge von Tooley

Gibt's doch nicht. Lag es tatsächlich nur an den Namen. Merci Sempervivum.

Genau, der Button soll dazu dienen, dass der "Kunde" einen Artikel aus dem Warenkorb rauslöschen kann. Er löscht den Gesamtpreis der Tabellenzeile. Danach wird die Summenfunktion ausgelöst, die sämtliche Gesamtpreise aller Zeilen zusammenrechnet und dann die Endsumme des gesamten Warenkorbs ausgibt. Im Endeffekt wird also nur die Endsumme aktualisiert. Als optische Unterstützung habe ich dazu die blend_out Funktion eingebaut, die die Tabellenzeile zusätzlich ausblendet, damit der Kunde auch direkt sieht, dass der Artikel "gelöscht" ist.

Die Summenfunktion habe übrigens auch nur aufgrund deiner Hilfe basteln können. Die funktioniert. Da brauchen wir nix dran machen.

function Summe() {
   var totals = document.querySelectorAll('.total');
   var sum = 0;
   for (let i = 0; totals.length > i; i++) {
      sum = sum + parseFloat(totals[i].value);
   }
      sum = sum.toFixed(2);
      document.getElementById('Summe').value = sum;

      var tax = parseFloat(sum) * 0.19;
      tax = tax.toFixed(2);
      document.getElementById('Steuer').value = tax;
}

Ja, stimmt schon. Es handelt sich auch nur um diese kleine Funktion.

function blend_out(id) {
   document.getElementById(id).style.display = 'none'
}

Die lege ich in den geschriebenen Eventhandler rein. Nur funktioniert es dennoch nicht.

Es soll beides ausgeführt werden, was auch geklappt hat, als ich noch onclick anstelle von class="delete" verwendet habe. Lösche ich das <a> weg, löst es auch nicht das Problem. Der Code funktioniert dann immer noch nicht.

Das mit der Verschachtelung hat mich aber auch schon gestört. Da versuche ich hinterher noch, dass irgendwie zusammenzufassen.

Habs jetzt erstmal umgeschrieben.

<td>
    <input type="button" value="X" class="delete" onclick="blend_out('zeile1')">
</td>

Jep, das HTML ist wie oben aufgebaut. Ich habe mal deinen Code kopiert und angepasst. Im Prinzip sind ja nur die letzten beiden <td> wichtig.

<table>
        <tr id="zeile1">
            <form name="Formular" action="">
                <td><input type="text" id="Artikel" size="20"></td>
                <td>
                    <input type="button" class="changeNr" value="-">
                    <input type="text" class="nr-person adult" data-factor="1" size="2" disabled="" value="1" />
                    <input type="button" class="changeNr" value="+">
                </td>
                <td>
                    <input type="button" class="changeNr" value="-">
                    <input type="text" class="nr-person child" data-factor="0.35" size="2" disabled="" value="1" />
                    <input type="button" class="changeNr" value="+">
                </td>
                <td>
                    <input type="text" class="per-item" disabled="disabled" value="23.95" size="5">
                </td>
                <td>
                    <input type="text" class="total" disabled="disabled" value="23.95" size="5">
                </td>
                <td>
                    <a href="javascript:blend_out('zeile1')"><input type="button" value="X" class="delete"></a>
                </td>
            </form>
        </tr>

Ich habe schon vermutet, dass <a> ebenfalls als Elternelement zählt und deswegen noch ein parentNode drangehängt, aber das ändert auch nichts.

Da habe ich gleich das nächste bzw. ein ähnliches Problem. Ich möchte nun eine reset-Funktion schreiben, die ein Inputtextfeld auf Null setzt. Ich habe mich hierbei an obigem Code orientiert und folgendes zusammengebastelt.

const buttons = document.querySelectorAll('.delete'); //alle delete-Buttons
for (let i = 0; buttons.length > i; i++) {
   const thebutton = buttons[i];
   thebutton.addEventListener('click', function () {
      const totalo = this.parentNode.parentNode;
      totalo = totalo.querySelector('.total');        //total = das zu löschende Textfeld
      totalo.value = 0;
      Summe();
   });
}

Der Code soll alle delete-Buttons sammeln und für jeden einen Eventhandler registrieren. Da dem Code wieder eine Tabelle zugrunde wäre <td> das Elternelement. Ich benötige aber <tr>, da dass zu löschende Textfeld total in einem anderen <td> liegt, als der delete-Button. Demnach habe ich this.parentNode.parentNode geschrieben. Abschließend sollte dann das total-Textfeld auf Null gesetzt und eine Funktion ausgeführt werden. Es klappt nicht. Wo liegt der/ liegen die Fehler?

PS: Die klassische reset()-Funktion bringt mir nichts, da sie das komplette Form löscht.

Ich danke euch!

Sorry erstmal, dass ich mich erst jetzt melde und danke für die ausführliche Antwort.

Da ist einiges an Code dabei, den ich noch nicht kenne. Ich werde mich da reinlesen. Aber im Groben habe ich es denke ich verstanden. Danke!

EDIT: Ich hab's durchgearbeitet und es funktioniert wunderbar. Dein Code hat mir gleich mehrere neue Dinge beigebracht. Ein paar Verständnisfragen habe ich aber noch.

1. Wenn man mittels querySelector nach .nr-person sucht, findet er trotzdem die dazugehörigen Klassen, obwohl sie "nr-person adult" und "nr-person child" heißen. Sucht er sich lediglich den Wortlaut "nr-person" raus?

2. Ist es bei Javascript üblich Variablen in einer Schleifen zu definieren?

3. Wozu benötige ich das console.log am Ende der summieren() Funktion?

Hallo,

ich bin dabei den Warenkorb zu einer Reiseseite zu gestalten und habe hierfür bereits eine Tabelle erstellt. In dieser Tabelle tauchen der Artikel (die Reise), die Personenanzahl, Kinderanzahl, sowie Einzelpreis und Gesamtpreis auf. Mittels + und - Buttons kann die Personen- bzw. Kinderanzahl verändert werden. Dabei werden per "onclick" Funktionen ausgeführt, die die Gesamtpreise berechnen, sowie auch die Summe des Warenkorbs. Mich stört nun, dass ich für jede Artikelzeile jeweils immer die gleichen Funktionen schreiben muss. Ich hätte z.B. gerne eine + Funktion, der die richtigen Parameter übergeben werden, anstatt in jeder Funktion immer nur mit document.getElementByID zu arbeiten. Aber seht selbst.

Folgendes ist ein JS-Auszug. Diese Funktionen ändern die Personenanzahl und errechnen den Gesamtbetrag. Summe() errechnet die Summenpreis des Warenkorbs.

<script>
    function abwählen(Preis) {
       var x = document.getElementById('Person').value;
       x = x - 1;
       if (1 > x) {
          x = x + 1;
       }
       document.getElementById('Person').value = x;

       var Kind = document.getElementById('Kind').value;
       var GPI = Kind * (Preis / 100 * 35);
       var GPII = (x - Kind) * Preis;
       Preis = GPI + GPII;
       Preis = Preis.toFixed(2);
       document.getElementById('Gesamtpreis').value = Preis;
       Summe();
    }

    function zuwählen() {
       var x = document.getElementById('Person').value;
       x = parseFloat(x) + 1;
       if (x > 10) {
           x = x - 1;
       }
       document.getElementById('Person').value = x;

       var Kind = document.getElementById('Kind').value;
       var Preis = document.getElementById('Einzelpreis').value;
       var GPI = Kind * (Preis / 100 * 35);
       var GPII = (x - Kind) * Preis;
       Preis = GPI + GPII;
       Preis = Preis.toFixed(2);
       document.getElementById('Gesamtpreis').value = Preis;
       Summe();
    }
</script>

Dies ist ein Ausschnitt aus der Tabelle. (Eine Tabellenzeile)

<tr id="zeile1">
   <form name="Formular" action="" >
   <td><input type="text" id="Artikel" size="20"></td>
   <td><input type="button" value="-" onclick="abwählen(23.95)">
       <input type="text" id="Person" size="2" disabled="" value="1" />
       <input type="button" value="+" onclick="zuwählen()"></td>
   <td><input type="button" value="-" onclick="minusKind()">
       <input type="text" id="Kind" size="2" disabled="" value="0"/>
       <input type="button" value="+" onclick="plusKind()"></td>
   <td><input type="text" id="Einzelpreis" disabled="disabled" value="23.95" size="5"></td>
   <td><input type="text" id="Gesamtpreis" disabled="disabled" value="23.95" size="5"></td>
   <td><a href="javascript:blend_out('zeile1')"><input type="button" value="X" onclick="reset1()"></a></td>
   </form>
</tr>

Der Code funktioniert wie er soll. Aber für jede weitere Zeile, müsste ich beispielsweise die abwählen-Funktion erneut schreiben und dann abwählen1, abwählen2... nennen. Wie kann ich der Funktion die Parameter Kind, Person, Gesamtpreis übergeben, sodass ich die abwählen-Methode nur einmal schreiben muss? Das Problem ist hierbei, dass sich die Werte für Kind oder Person jedes Mal ändern, sodass ich nicht einfach abwählen(2.35, 4, 6) schreiben kann.

Und ich bin sicher, dass ich den Code etwas kompliziert geschrieben habe. Für generelle Vereinfachungen oder Verbesserungen bin ich auch dankbar.