nicht angemeldet
Rolf BHallo Helmut,
es gibt grundsätzlich zwei Ansätze.
Die Schlagwort-Buttons hier im Forum werden dynamisch erzeugt, nicht eingeblendet. Dafür suchst Du nach createElement('button') und appendChild. Zum Entfernen suchst Du nach removeChild.
Ein Objekt im DOM hat mehrere Schnittstellen. Die grundlegende Schnittstelle ist Node, die drei genannten Methoden gehören dazu. Nodes können vielerlei sein: einfacher Text, Kommentare, Attribute, die <!doctype html> Deklaration, und Elemente.
Elemente haben die weitere Schnittstelle Element. Dort finden sich noch weitere Methoden zum Modifizieren des DOM Objektbaums: append, prepend und insertAdjacentElement.
Das Dokument, das dein Browser anzeigt, ist ein weiterer Node-Typ, der die zusätzliche Schnittstelle Document anbietet.
Folge den Links in unser Wiki, um mehr zu erfahren.
Wenn Du auf diesem Weg einen Button erzeugen willst, musst Du zuerst mit der createElement Methode des document-Objekts ein button-Element erzeugen. Das ist eine Fabrikmethode, die Dir ein Element-Objekt mit den speziellen Schnittstellenergänzungen für Buttons liefert (die HTMLButtonElement -Schnittstelle - da ist der Javascript-Teil unseres Wiki schwach und ich muss auf die Mozilla-Doku verweisen). Du musst dem Button die erforderlichen Eigenschaften geben (die bis auf Groß-/Kleinschreibung den gleichen Namen tragen wie die HTML Attribute - aber du musst sie genau richtig schreiben, weil JavaScript zwischen den Namen dingsbums und dingsBums unterscheidet), und ihn dann an die richtige Stelle in den Objektbaum des DOM hängen. Dafür dienen die genannten Methoden.
Der zweite Ansatz besteht darin, alle Buttons bereits im HTML stehen zu haben und sie mittels CSS Eigenschaften sichtbar zu machen oder zu verstecken. Das geht bei einer kleinen, überschaubaren Anzahl. Hier im Forum geht es nicht, es gibt zu viele Schlagworte. Das Sichtbarmachen kannst Du mit einer Klasse wie "aktiv" steuern, die Du dem jeweiligen Button zuweist oder wegnimmst, oder wie Henry vorschlug mit CSS Inline Styles. Klassen sind aber eigentlich besser, weil Du damit dann auch via querySelectorAll alle aktiven Buttons finden kannst.
Aber - wenn Du die Buttons bereits alle im HTML stehen hast - warum willst Du dann Buttons verwenden? Ist eine Liste mit Checkboxen nicht viel sinnvoller? Die kannst Du sogar wie Buttons aussehen lassen:
<ul id="optionen">
<li>
<label><input type="checkbox" name="ausw1"><span>Auswahl 1</span></label>
</li>
<li>
<label><input type="checkbox" name="ausw2"><span>Auswahl 2</span></label>
</li>
<li>
<label><input type="checkbox" name="ausw3"><span>Auswahl 3</span></label>
</li>
<li>
<label><input type="checkbox" name="ausw4"><span>Auswahl 4</span></label></li>
</ul>
Die Listenpunkte kannst Du mit list-style-type:none verstecken, aber eine Liste ist eine Liste und sollte auch so aufgeschrieben werden.
Mit dem CSS Selektor #optionen input:checked ~ span kannst Du den Text hinter der Checkbox umstylen, wenn die Auswahl aktiv wird. Du kannst die Checkbox selbst auch verstecken - wegen des Labels kann man auf den Auswahltext klicken und die Checkbox reagiert.
Rolf
sumpsi - posui - obstruxi
Henry