2023-05-16 12:52:47 +02:00
|
|
|
window.addEventListener('DOMContentLoaded', function () {
|
|
|
|
let standardWerte = [10, 10, 10];
|
|
|
|
const preise = [0.95, 2.0, 1.10];
|
2023-05-04 09:13:42 +02:00
|
|
|
|
2023-05-16 12:52:47 +02:00
|
|
|
berechnePreise();
|
|
|
|
|
|
|
|
document.getElementById("button1").addEventListener('click', function () {
|
|
|
|
entferneAusWarenkorb(1);
|
|
|
|
});
|
|
|
|
|
|
|
|
document.getElementById("button2").addEventListener('click', function () {
|
|
|
|
entferneAusWarenkorb(2);
|
|
|
|
});
|
|
|
|
|
|
|
|
document.getElementById("button3").addEventListener('click', function () {
|
|
|
|
entferneAusWarenkorb(3);
|
|
|
|
});
|
|
|
|
|
|
|
|
document.getElementById("button4").addEventListener('click', function () {
|
|
|
|
entferneAusWarenkorb(4);
|
|
|
|
});
|
|
|
|
|
|
|
|
document.getElementById("button5").addEventListener('click', function () {
|
|
|
|
entferneAusWarenkorb(5);
|
|
|
|
});
|
2023-05-04 09:13:42 +02:00
|
|
|
|
2023-05-16 12:52:47 +02:00
|
|
|
document.getElementById("button6").addEventListener('click', function () {
|
|
|
|
entferneAusWarenkorb(6);
|
|
|
|
});
|
2023-05-04 09:13:42 +02:00
|
|
|
|
2023-05-16 12:52:47 +02:00
|
|
|
var bestellbutton1 = document.getElementById("bestellbutton_desktop").addEventListener('click', checkObFeldLeer);
|
|
|
|
var bestellbutton2 = document.getElementById("bestellbutton_mobil").addEventListener('click', checkObFeldLeer);
|
2023-05-07 15:30:24 +02:00
|
|
|
|
2023-05-16 12:52:47 +02:00
|
|
|
function entferneAusWarenkorb(index) {
|
|
|
|
let inputId = 'menue' + index;
|
|
|
|
let inputElement = document.getElementById(inputId);
|
|
|
|
let testVar = inputElement.value;
|
|
|
|
|
|
|
|
if (/^[0-9]+$/.test(testVar) === false) {
|
|
|
|
zeigeHinweisfenster("Keine gültige Zahl eingegeben.");
|
2023-05-07 15:30:24 +02:00
|
|
|
} else {
|
2023-05-16 12:52:47 +02:00
|
|
|
let verringereUm = parseInt(inputElement.value);
|
2023-05-04 09:13:42 +02:00
|
|
|
|
2023-05-16 12:52:47 +02:00
|
|
|
if (index === 4) {
|
|
|
|
index = 1;
|
|
|
|
}
|
|
|
|
if (index === 5) {
|
|
|
|
index = 2;
|
|
|
|
}
|
|
|
|
if (index === 6) {
|
|
|
|
index = 3;
|
|
|
|
}
|
|
|
|
if ((standardWerte[index - 1] - verringereUm) < 0) {
|
|
|
|
zeigeHinweisfenster("Der Wert darf nicht negativ sein/die Anzahl darf nicht unter 0 fallen.");
|
|
|
|
} else {
|
|
|
|
zeigeHinweisfenster("");
|
|
|
|
let aktuellerWert = standardWerte[index - 1] - verringereUm;
|
|
|
|
standardWerte[index - 1] = aktuellerWert;
|
|
|
|
inputElement.value = aktuellerWert;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
berechnePreise();
|
2023-05-04 09:13:42 +02:00
|
|
|
|
|
|
|
}
|
2023-06-06 16:56:45 +02:00
|
|
|
|
2023-05-16 12:52:47 +02:00
|
|
|
function berechnePreise() {
|
|
|
|
for (let i = 0; i < standardWerte.length; i++) {
|
|
|
|
let preisID = 'gesamtbetrag' + (i + 1);
|
|
|
|
let preisElement = document.getElementById(preisID);
|
|
|
|
let preisEinzeln = (standardWerte[i] * preise[i]).toFixed(2);
|
|
|
|
preisElement.innerText = "Betrag Gesamt (inkl. MwSt.): " + preisEinzeln + '€';
|
|
|
|
}
|
|
|
|
for (let i = 0; i < standardWerte.length; i++) {
|
|
|
|
let preisID = 'gesamtbetrag' + (i + 4);
|
|
|
|
let preisElement = document.getElementById(preisID);
|
|
|
|
let preisEinzeln = (standardWerte[i] * preise[i]).toFixed(2);
|
|
|
|
preisElement.innerText = "Betrag Gesamt (inkl. MwSt.): " + preisEinzeln + '€';
|
|
|
|
}
|
|
|
|
gesamtpreis = ((standardWerte[0] * preise[0]) + (standardWerte[1] * preise[1]) + (standardWerte[2] * preise[2])) + 2.90;
|
|
|
|
let gesamtkostenText = document.getElementById("gesamtpreis");
|
|
|
|
gesamtkostenText.innerText = gesamtpreis.toFixed(2) + "€";
|
|
|
|
localStorage.setItem("gesamtpreis", gesamtpreis);
|
|
|
|
}
|
|
|
|
|
|
|
|
function zeigeHinweisfenster(text) {
|
|
|
|
var hinweisfenster = document.getElementById("notification");
|
|
|
|
hinweisfenster.innerText = text;
|
|
|
|
if (text !== "") {
|
|
|
|
hinweisfenster.style.display = "block";
|
|
|
|
} else {
|
|
|
|
hinweisfenster.style.display = "none";
|
|
|
|
}
|
2023-05-04 09:13:42 +02:00
|
|
|
}
|
|
|
|
|
2023-05-16 12:52:47 +02:00
|
|
|
function checkObFeldLeer(event) {
|
|
|
|
let feld1 = document.getElementById("menue1").value;
|
|
|
|
let feld2 = document.getElementById("menue2").value;
|
|
|
|
let feld3 = document.getElementById("menue3").value;
|
|
|
|
let feld4 = document.getElementById("menue4").value;
|
|
|
|
let feld5 = document.getElementById("menue5").value;
|
|
|
|
let feld6 = document.getElementById("menue6").value;
|
|
|
|
|
|
|
|
if ((feld1 === "") || (feld2 === "") || (feld3 === "") || (feld4 === "") || (feld5 === "") || (feld6 === "")) {
|
|
|
|
event.preventDefault();
|
|
|
|
zeigeHinweisfenster("Kein Feld darf leer sein!");
|
|
|
|
|
|
|
|
}
|
|
|
|
else if ((/^[0-9]{1,}$/.test(feld1) === false) || (/^[0-9]{1,}$/.test(feld2) === false) || (/^[0-9]{1,}$/.test(feld3) === false)
|
|
|
|
|| (/^[0-9]{1,}$/.test(feld4) === false) || (/^[0-9]{1,}$/.test(feld5) === false) || (/^[0-9]{1,}$/.test(feld6) === false)) {
|
|
|
|
event.preventDefault();
|
2023-06-06 16:56:45 +02:00
|
|
|
zeigeHinweisfenster("Es stehen keine (gültigen) Zahlen in den Feldern. [gültig = positive Zahlen 0-9]");
|
2023-05-16 12:52:47 +02:00
|
|
|
}
|
|
|
|
else {
|
|
|
|
window.location.href = event.target.href;
|
|
|
|
// zeigeHinweisfenster("Feld ist nicht leer");
|
|
|
|
}
|
|
|
|
}
|
2023-05-04 09:13:42 +02:00
|
|
|
|
2023-06-06 16:56:45 +02:00
|
|
|
var menue1 = document.getElementById('menue1');
|
|
|
|
var menue2 = document.getElementById('menue2');
|
|
|
|
var menue3 = document.getElementById('menue3');
|
|
|
|
var gesamtbetrag1 = document.getElementById('gesamtbetrag1');
|
|
|
|
var gesamtbetrag2 = document.getElementById('gesamtbetrag2');
|
|
|
|
var gesamtbetrag3 = document.getElementById('gesamtbetrag3');
|
|
|
|
var gesamtpreis = document.getElementById('gesamtpreis');
|
|
|
|
|
|
|
|
// Funktion zum Aktualisieren des Gesamtbetrags für Produkt 1
|
|
|
|
function updateGesamtbetrag1() {
|
|
|
|
var menueValue = menue1.value;
|
|
|
|
var kosten = 0.95;
|
|
|
|
var gesamtbetrag = kosten * menueValue;
|
|
|
|
gesamtbetrag1.innerHTML = "Betrag Gesamt (inkl. MwSt.): " + gesamtbetrag.toFixed(2) + "€";
|
|
|
|
updateGesamtpreis();
|
|
|
|
}
|
|
|
|
|
|
|
|
// Funktion zum Aktualisieren des Gesamtbetrags für Produkt 2
|
|
|
|
function updateGesamtbetrag2() {
|
|
|
|
var menueValue = menue2.value;
|
|
|
|
var kosten = 2;
|
|
|
|
var gesamtbetrag = kosten * menueValue;
|
|
|
|
gesamtbetrag2.innerHTML = "Betrag Gesamt (inkl. MwSt.): " + gesamtbetrag.toFixed(2) + "€";
|
|
|
|
updateGesamtpreis();
|
|
|
|
}
|
|
|
|
|
|
|
|
// Funktion zum Aktualisieren des Gesamtbetrags für Produkt 3
|
|
|
|
function updateGesamtbetrag3() {
|
|
|
|
var menueValue = menue3.value;
|
|
|
|
var kosten = 1.1;
|
|
|
|
var gesamtbetrag = kosten * menueValue;
|
|
|
|
gesamtbetrag3.innerHTML = "Betrag Gesamt (inkl. MwSt.): " + gesamtbetrag.toFixed(2) + "€";
|
|
|
|
updateGesamtpreis();
|
|
|
|
}
|
|
|
|
|
|
|
|
// Funktion zum Aktualisieren des Gesamtpreises
|
|
|
|
function updateGesamtpreis() {
|
|
|
|
var menueValue1 = menue1.value;
|
|
|
|
var menueValue2 = menue2.value;
|
|
|
|
var menueValue3 = menue3.value;
|
|
|
|
var kosten1 = 0.95;
|
|
|
|
var kosten2 = 2;
|
|
|
|
var kosten3 = 1.1;
|
|
|
|
var gesamtpreisValue = (kosten1 * menueValue1) + (kosten2 * menueValue2) + (kosten3 * menueValue3) + 2.9;
|
|
|
|
gesamtpreis.innerHTML = gesamtpreisValue.toFixed(2) + "€";
|
|
|
|
}
|
|
|
|
|
|
|
|
// Event-Listener für Änderungen der Anzahl
|
|
|
|
menue1.addEventListener('input', updateGesamtbetrag1);
|
|
|
|
menue2.addEventListener('input', updateGesamtbetrag2);
|
|
|
|
menue3.addEventListener('input', updateGesamtbetrag3);
|
|
|
|
|
|
|
|
// Initialisierung des Gesamtbetrags und Gesamtpreises
|
|
|
|
updateGesamtbetrag1();
|
|
|
|
updateGesamtbetrag2();
|
|
|
|
updateGesamtbetrag3();
|
|
|
|
});
|