Tweet
Guten Tage Liebe Entwickler,
ich habe vor 2 Wochen mit dem Programmieren lernen begonnen.
Nun bin ich soweit, 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 Anzahlauswahl wird über einem 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 Inputwert und vorherigem Wert herausbekomme. Immer wenn ich den Code durchführe kommt der aktuelle Wert dabei heraus, sodass auf dem vorherigen Inputwert nicht zugegriffen werden kann.
Unten habe ich euch mal den Code hinterlassen inkl. HTML, konnte die Dateien leider nicht anhängen. Es geht hier noch nicht um die Optik ;-)
Eventuell müsste man bei meinem Vorhaben mit einer Datenbank arbeiten?
Freue mich auf eure Antworten.
Euer JavaScript Anfänger
HTML Code:
</head>
<body bodyID>
<h1>Preis deines Gartentors:</h1>
<h1 SummenText1 id="SummenText">1000</h1>
<div id="Zubehoer">
<input type="checkbox" antrieb name="Mit_Antrieb" id="Mit_Antrieb" >
<label for="Mit Antrieb">Mit Antrieb</label>
<input type="checkbox" handsender id="handsenderCheckbox" name="Mit Handsender" >
<label for="Mit Antrieb">Mit Handsender</label>
<input value="0" type="number" min="0" max="30" anzahl id="main">Bitte Anzahl wählen</input>
<input type="checkbox" warnleuchte id="warnleuchte" name="Mit Warnleuchte" id="Warnleuchte">
<label for="Mit Antrieb">Mit Warnleuchte</label>
<button data-clickme>50 € Trinkgeld geben</button>
<button data-clickit>50 € Trinkgeld zurücknehmen</button>
JavaScript Code (separate Datei):
window.onload = function () {
AnzahlCheck.hidden=true
}
function textModified(Mein_Text,x,y ) {
var Mein_Text_parse= parseFloat(Mein_Text.textContent)
var y = parseFloat(AnzahlCheck.value)
window.alert("x ist" + x + "vorherige Summe ist" + Mein_Text_parse + "aktuelle Anzahl ist" + y )
var NeuesErgebnisOhneVariable = x+Mein_Text_parse-y
var neuesErgebnis= NeuesErgebnisOhneVariable + y + y
Mein_Text.innerHTML= neuesErgebnis
}
const clickMe = document.querySelector('[data-clickme]')
const clickIt = document.querySelector('[data-clickit]')
var Mein_Text = document.querySelector('[SummenText1]')
const antriebCheck = document.querySelector('[antrieb]')
const handsenderCheck = document.querySelector('[handsender]')
const warnleuchteCheck = document.querySelector('[warnleuchte]')
var AnzahlCheck = document.getElementById('main');
clickMe.addEventListener('click', button => {
textModified(Mein_Text, 50)
})
clickIt.addEventListener('click', button => {
textModified(Mein_Text, -50)
})
antriebCheck.addEventListener('click', check => {
if (antriebCheck.checked) {
textModified(Mein_Text, 649)
} else {textModified(Mein_Text, -649)}
})
handsenderCheck.addEventListener('click', check => {
if (handsenderCheck.checked) {
addHandsenderAnzahl();
} else removeHandsenderAnzahl(); window.alert("Vorsicht: Sie haben keine Handsender mehr!"); }
)
main.addEventListener('input', check => {
getSumOfHandsender();
textModified (Mein_Text, 0, 0);
})
warnleuchteCheck.addEventListener('click', check => {
if (warnleuchteCheck.checked) {
textModified(Mein_Text, 49)
} else {textModified(Mein_Text, -49)}
})
function addHandsenderAnzahl () {
AnzahlCheck.hidden=false
}
function removeHandsenderAnzahl () {
AnzahlCheck.hidden=true
}
function getSumOfHandsender() {
var AlteAnzahl = parseFloat(AnzahlCheck.value)
window.alert( AlteAnzahl + 'ist die AlteAnzahl' )
SummeHandsender= AlteAnzahl * 36
return SummeHandsender
}
ich habe vor 2 Wochen mit dem Programmieren lernen begonnen.
Nun bin ich soweit, 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 Anzahlauswahl wird über einem 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 Inputwert und vorherigem Wert herausbekomme. Immer wenn ich den Code durchführe kommt der aktuelle Wert dabei heraus, sodass auf dem vorherigen Inputwert nicht zugegriffen werden kann.
Unten habe ich euch mal den Code hinterlassen inkl. HTML, konnte die Dateien leider nicht anhängen. Es geht hier noch nicht um die Optik ;-)
Eventuell müsste man bei meinem Vorhaben mit einer Datenbank arbeiten?
Freue mich auf eure Antworten.
Euer JavaScript Anfänger
HTML Code:
</head>
<body bodyID>
<h1>Preis deines Gartentors:</h1>
<h1 SummenText1 id="SummenText">1000</h1>
<div id="Zubehoer">
<input type="checkbox" antrieb name="Mit_Antrieb" id="Mit_Antrieb" >
<label for="Mit Antrieb">Mit Antrieb</label>
<input type="checkbox" handsender id="handsenderCheckbox" name="Mit Handsender" >
<label for="Mit Antrieb">Mit Handsender</label>
<input value="0" type="number" min="0" max="30" anzahl id="main">Bitte Anzahl wählen</input>
<input type="checkbox" warnleuchte id="warnleuchte" name="Mit Warnleuchte" id="Warnleuchte">
<label for="Mit Antrieb">Mit Warnleuchte</label>
<button data-clickme>50 € Trinkgeld geben</button>
<button data-clickit>50 € Trinkgeld zurücknehmen</button>
JavaScript Code (separate Datei):
window.onload = function () {
AnzahlCheck.hidden=true
}
function textModified(Mein_Text,x,y ) {
var Mein_Text_parse= parseFloat(Mein_Text.textContent)
var y = parseFloat(AnzahlCheck.value)
window.alert("x ist" + x + "vorherige Summe ist" + Mein_Text_parse + "aktuelle Anzahl ist" + y )
var NeuesErgebnisOhneVariable = x+Mein_Text_parse-y
var neuesErgebnis= NeuesErgebnisOhneVariable + y + y
Mein_Text.innerHTML= neuesErgebnis
}
const clickMe = document.querySelector('[data-clickme]')
const clickIt = document.querySelector('[data-clickit]')
var Mein_Text = document.querySelector('[SummenText1]')
const antriebCheck = document.querySelector('[antrieb]')
const handsenderCheck = document.querySelector('[handsender]')
const warnleuchteCheck = document.querySelector('[warnleuchte]')
var AnzahlCheck = document.getElementById('main');
clickMe.addEventListener('click', button => {
textModified(Mein_Text, 50)
})
clickIt.addEventListener('click', button => {
textModified(Mein_Text, -50)
})
antriebCheck.addEventListener('click', check => {
if (antriebCheck.checked) {
textModified(Mein_Text, 649)
} else {textModified(Mein_Text, -649)}
})
handsenderCheck.addEventListener('click', check => {
if (handsenderCheck.checked) {
addHandsenderAnzahl();
} else removeHandsenderAnzahl(); window.alert("Vorsicht: Sie haben keine Handsender mehr!"); }
)
main.addEventListener('input', check => {
getSumOfHandsender();
textModified (Mein_Text, 0, 0);
})
warnleuchteCheck.addEventListener('click', check => {
if (warnleuchteCheck.checked) {
textModified(Mein_Text, 49)
} else {textModified(Mein_Text, -49)}
})
function addHandsenderAnzahl () {
AnzahlCheck.hidden=false
}
function removeHandsenderAnzahl () {
AnzahlCheck.hidden=true
}
function getSumOfHandsender() {
var AlteAnzahl = parseFloat(AnzahlCheck.value)
window.alert( AlteAnzahl + 'ist die AlteAnzahl' )
SummeHandsender= AlteAnzahl * 36
return SummeHandsender
}
Comment