Guten Tage Liebe Entwickler,
ich habe vor 2 Wochen mit dem Programmieren lernen begonnen.
Nun bin ich so weit, dass ich zumindest eine einfache Preis-Kalkulation mit Häkchen setzen kann und dann der Preis dieses Zusatzprodukts einer vorhandenen Summe auf einem HTML Dokument mittels JavaScript hinzufügen oder abziehen kann.
Die vorhandene Summe ist dabei das Hauptprodukt (hier eine Gartentoranlage) und die Zusatzprodukte sind Zubehörelemente. Beim Häkchen z. B. Griff für das Türchen.
Leider hänge ich seit einigen Stunden am folgenden Problem: Die Preise für ein Zusatzprodukt werden mit Häkchen der Gesamtsumme hinzuaddiert (durch Eventlistener 'click' auf dem Kästchen ausgelöst). Beim zweiten Klicken wird der Wert dann wieder von der Summe abgezogen, weil das Häkchen dann ja wieder entfernt wird. Soweit so gut.
Nun habe ich jedoch ein Problem mit der Eingabe einer Anzahl eines Zusatzprodukts. Das Zusatzprodukt "Handsender zur elektrischen Toröffnung" kostet 36 € pro Stück und kann bis zu 30x hinzugefügt werden. Wenn im Anzahl-Input Feld die Zahl eingetragen wird, welches dann mit der Summe 36 € multipliziert wird, dann wird das Ergebnis dem Gesamtbetrag des Produkts hinzugefügt. Das klappt auch - aber nur beim ersten Mal. Das Problem ist nämlich, dass bei der zweiten Änderung z. B. von 5 Stück auf 7 Stück nicht 2 Stück hinzugefügt werden, sondern noch mal 7 Stück. Es sollte jedoch nur die Differenz sein, da es ja nur 2 Stück mehr sind als zuvor. Der Eventlistener bei dem Zusatzprodukt mit Anschlagswahl wird über einen Input-Eventlistener aktualisiert und der Gesamtsumme hinzugefügt. Als Programmieranfänger sehe ich hier nur die Möglichkeit, mit der Differenz der Anzahl zu arbeiten. Jedoch weiß ich nicht genau, wie ich die Differenz zwischen Input wert und vorherigem Wert herausbekomme. Immer wenn ich den Code durchführe, kommt der aktuelle Wert dabei heraus, sodass auf den vorherigen Input wert nicht zugegriffen werden kann.
Code
<style>
#minustrink,#anzahllabel{
display:none;
}
</style>
<body>
<h1>Preis deines Gartentors:</h1>
<h1 id="SummenText">1000</h1>
<label>Mit Antrieb
<input type="checkbox" id="Mit_Antrieb">
</label><br>
<label>Mit Handsender
<input type="checkbox" id="handsenderCheckbox">
</label><br>
<label id="anzahllabel">Bitte Anzahl wählen
<input value="0" type="number" min="0" max="30" id="main">
<br></label>
<label>Mit Warnleuchte
<input type="checkbox" id="warnleuchte">
</label><br>
<button id="plustrink">50 € Trinkgeld geben</button>
<button id="minustrink">50 € Trinkgeld zurücknehmen</button>
<script>
var sender=0;
var inp=document.querySelectorAll('label input,button');
var anzlab=document.getElementById('anzahllabel');
var plutri=document.getElementById('plustrink');
var mintri=document.getElementById('minustrink');
var val=document.getElementById('SummenText');
inp.forEach(function(d){
d.addEventListener('click',function(){
var erg=parseInt(val.innerHTML);
switch (d.id){
case 'Mit_Antrieb':
val.innerHTML=d.checked==true ? erg+50 : erg-50;
break;
case 'handsenderCheckbox':
val.innerHTML=d.checked==true ? erg+sender : erg-sender;
anzlab.style.display=d.checked==true ? "block" : "none";
break;
case 'main':
val.innerHTML=erg-sender+d.value*36;
sender=d.value*36;
break;
case 'warnleuchte':
val.innerHTML=d.checked==true ? erg+25 : erg-25;
break;
case 'plustrink':
val.innerHTML=erg+50;
plutri.style.display='none';
mintri.style.display='block';
break;
case 'minustrink':
val.innerHTML=erg-50;
plutri.style.display='block';
mintri.style.display='none';
break;
}
})
})
</script>