Preis Tabellen
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?
Der hier verwendete Code
<style>
#minustrink,#anzahllabel{
display:none;
}
</style>
<body>
<h1>Preis deines Gartentors:</h1>
<h1 id="SummenText">1000</h1>
<label>Mit Antrieb
<input type="checkbox" data-wert="50" id="Mit_Antrieb">
</label><br>
<label>Mit Handsender
<input type="checkbox" data-wert="0" id="handsenderCheckbox">
</label><br>
<label id="anzahllabel">Bitte Anzahl wählen
<input value="0" data-wert="36" type="number" min="0" max="30" id="main">
<br></label>
<label>Mit Warnleuchte
<input data-wert="25" type="checkbox" id="warnleuchte">
</label><br>
<label>
<input data-wert="50" type="checkbox" id="spende">50 € Trinkgeld geben
</label>
<script>
var sender=0;
var inp=document.querySelectorAll('label input,button');
var anzlab=document.getElementById('anzahllabel');
var hand=document.getElementById('main');
var val=document.getElementById('SummenText');
var alles=[];
function start(){
var erg=0;
inp.forEach(function(d){
if(d.checked==true){
if(d.id=='handsenderCheckbox'){
erg=erg+(hand.value*alles[2][1]);
}else{
erg=erg+parseInt(d.dataset.wert);
}
}else if(d.checked==false){
erg=erg+0;
}
alles.push([d.id,d.dataset.wert,d.checked])
})
val.innerHTML=1000+erg;
}
start()
inp.forEach(function(d){
d.addEventListener('click',function(){
alles.forEach(function myFunction(item, index, alles) {
if(alles[index][0]==d.id){
alles[index][2]=d.checked==true ? 'false' : 'true';
start()
}else{
if(d.id=='handsenderCheckbox'){
anzlab.style.display=d.checked==true ? "block" : "none";
}
}
})
})
})
</script>