Dringende Hilfe bei dynamischem Formular

[eslohmtsich]

'N Abend!

Ich bin Informationsverarbeitungs Student im 1.Semester und hab ein Problem bei einer Hausaufgabe bzw. eher ein generelles Verständnis Problem bei der Verwendung des Tags innerHTML.

Also. Folgende Aufgabenstellung:

Erweitern Sie die Funktionalität der Kontaktseite:

Wenn im select-Feld die Auswahl "sonstiges" getroffen wird, soll sich nichts ändern.
wenn im select-Feld die Auswahl "Presseanfrage" getroffen wird, soll unterhalb des select-Felds ein weiteres Eingabefeld mit Javascript erzeugt werden: Verlag
wenn im select-Feld die Auswahl "Ticketbestellung" getroffen wird, soll unterhalb des select-Felds ein weiteres Eingabefeld mit Javascript erzeugt werden: Anzahl Tickets.
Durch Änderung der Eingabe soll eine Funktion aufgerufen werden, die den Gesamtpreis der Tickets (à 11 Euro) berechnet.
Der Gesamtpreis soll von der Funktion in ein von Ihnen zu wählendes ebenfalls neu generiertes Element mit der Beschriftung 'Gesamt:' geschrieben werden.
Wird wieder eine andere Option gewählt, verschwindet das generierte Feld wieder und je nach Option erscheinen die passenden Eingabemöglichkeiten.
So. Das Formular besteht schon von vorherigen Sitzungen und ist auch valide.

Mein bisheriger Code:

  
function Tickets () {  
	var Anzahl = document.getElementById('Ticketbestellung');  
	Anzahl.innerHTML = '<input type="text">';  
  
}

  
<div class="abstand">  
<label for="Anliegen">Was ist Ihr Anliegen??</label>  
	<select id="Anliegen" name="Anliegen" required>  
		<option value="">bitte auswählen</option>  
		<option>value="Abteilung1"onclick="Tickets();">Ticketbestellung</option>  
		<fieldset id="Ticketbestellung"></fieldset>  
		<option value="Abteilung2">Presseanfrage</option>  
		<option value="Abteilung3">Sonstiges</option>  
	</select>  
							  
</div>

Ich hab schon alles mögliche Probiert, die jetzige Version ist sogar quasi einer fast exacten Vorgabe nachempfunden aber ich steig einfach nicht dahinter. Wenn ich das Feld "Ticketbestellung" anklicke, wird einfach nicht das neue Fenster erstellt.

Ich erwarte auch nicht, dass mir hier jetzt jemand den fertigen Code postet. Aber vielleicht merkt ja jemand, welchen Entscheidenden Punkt oder so Ich noch nicht geschnallt hab.

Schonmal vielen dank für jeden der sich das durchliest :)

Lg
eslohmtsich

[eslohmtsich]

Das fälschlicher Weise geschlossene <option> tag ist nur hier fehlerhaft und nicht im tatsächlichem Formular

[M.]

Mahlzeit,

  <option>value="Abteilung1"onclick="Tickets();">Ticketbestellung</option>  

Nicht getestet, aber ein onClick in Option sieht für mich seltsam aus.
Schonmal mit nem onChange im Select probiert?

[eslohmtsich]

Ja grade getestet. Negativ :(

[M.]

Mahlzeit,

Ja grade getestet. Negativ :(

Dann läuft wohl irgendwas falsch. Allerdings kann ich aus der Masse der Infos, mit denen du mich überschüttest, nichts rauslesen, was für die Problemlösung relevant wäre.

[eslohmtsich]

Sorry, war einfach nur copy & paste. Im fokus liegt eigentlich nur der Abschnitt den ich auch als code gepostet habe und die frage warum zum henker das nicht funktioniert. wenn ich den fehler behoben/gefunden habe, dann komm ich mit dem rest wohl auch alleine klar. Aber vorher kann ich leider den rest auch nicht machen.

Also erstmal nur: Es soll wenn "Ticketbestellung" gewählt wird, das zusätzliche in der JS Function definierte Feld "Anzahl" erscheinen.

[M.]

Mahlzeit,

Es wäre viel interessanter, wie der Code aussieht, bei dem du ein onChange ins Select gebaut hast, was, deiner Aussage nach, nicht funktioniert.

Ich mein, das was in der Javascript-Konsole steht, muss dir doch weiterhelfen. Und solange du diese ganzen Infos für dich behälst, bist du auch der Einzige, dem das hilft.

[eslohmtsich]

Okay, sorry bin im Umgang mit den Developer Tools noch nicht so fit.

also der code mit dem onchange in dem select:
hab auch auch ausprobiert das onChange in die option von Ticketbestellung zu packen, klappt aber leider auch nicht.

<div class="abstand">  
<label for="Anliegen">Was ist Ihr Anliegen??</label>  
	<select onChange="Tickets();" id="Anliegen" name="Anliegen" required>  
		<option value="">bitte auswählen</option>  
		<option value="Abteilung1">Ticketbestellung</option>  
		<fieldset id="Ticketbestellung"></fieldset>  
		<option value="Abteilung2">Presseanfrage</option>  
		<option value="Abteilung3">Sonstiges</option>  
	</select>  
</div>

meine konsole meldet mir als fehler im JS Code: Uncaught Type Error: Cannot set property 'innerHTML' of null

Aber was genau sagt mir diese Fehlermeldung jetzt?

Schonmal vielen dank für deine noch späte mühe!

[M.]

Mahlzeit,

Aber was genau sagt mir diese Fehlermeldung jetzt?

Das sagt, dass das Objekt, auf das du zugreifen willst, nicht existiert, bzw. die Methode, mit der du zugreifen willst, nicht existiert.

[Der Martin]

Hallo,

function Tickets () {

var Anzahl = document.getElementById('Ticketbestellung');
Anzahl.innerHTML = '<input type="text">';

}

  
das ist interessant, aber ...  
  

> ~~~html

<div class="abstand">  

> <label for="Anliegen">Was ist Ihr Anliegen??</label>  
> 	<select id="Anliegen" name="Anliegen" required>  
> 		<option value="">bitte auswählen</option>  
> 		<option>value="Abteilung1"onclick="Tickets();">Ticketbestellung</option>  
> 		<fieldset id="Ticketbestellung"></fieldset>  
> 		<option value="Abteilung2">Presseanfrage</option>  
> 		<option value="Abteilung3">Sonstiges</option>  
> 	</select>  
> </div>

... ich sehe in deinem HTML-Code nur ein Element mit der ID "Ticketbestellung", und das ist ein fieldset-Element an einer Stelle, wo es gar nicht vorkommen darf - nämlich als Kindelement eines <select/> (ganz zu schweigen davon, dass das schließende Tag fehlt). Sorge also bitte erstmal für validen Code, bevor wir uns über Folgefehler den Kopf zerbrechen.

So long,
 Martin

[eslohmtsich]

Hey Martin,

ich verstehe nicht ganz welches fehlendes Endtag du meinst. Sowohl <select> also auch <fieldset> sind geschlossen. der w3 validator meldet mir als die einzigen beiden fehlermeldungen stray start bzw. end tag von fieldset. und wie gesagt, der fehler in dem zufrüh geschlossenem <option> tag war ein fehler bei der übertragung in das forum, im code ist es richtig.

lieben dank
sebastian

[eslohmtsich]

Vielleicht noch andere Ideen? Irgendwer?

[Der Martin]

Hallo,

ich verstehe nicht ganz welches fehlendes Endtag du meinst. Sowohl <select> also auch <fieldset> sind geschlossen.

stimmt, da hab ich mich gestern abend vertan.

der fehler in dem zufrüh geschlossenem <option> tag war ein fehler bei der übertragung in das forum, im code ist es richtig.

Sowas hatte ich schon vermutet und "in Gedanken" korrigiert. Aber ...

der w3 validator meldet mir als die einzigen beiden fehlermeldungen stray start bzw. end tag von fieldset.

... der eigentliche Fehler ist wohl immer noch da. Du notierst ein fieldset als Kindelement von select - das darf nicht sein. Ein select darf als Kindelemente nur option haben (und optgroup).

Ciao,
 Martin