Select Li Element on Keyup
bearbeitet von OrlokHey
> > Für sowas sind `button`s zu verwenden.
>
> Nun habe ich mal nachgeschaut was es denn sonst noch so gibt außer Buttons.
Einiges. Aber für sowas sind `button`s zu verwenden.
> Irgendwo habe ich gelesen A wäre nicht gut für onclick.
Ein `a` Element verwendet man um einen Link zu setzten. Das funktioniert ohne Zutun eines Skripts. Wenn du keinen Link setzen möchtest, ist `a` nicht das richtige Element.
> Aber mal so einfach gefragt, kann man nicht auch ein Label verwenden?
Ein `label` wird verwendet um ein anderes Element zu beschriften. Ein `label` das kein anderes Element beschriftet ist nicht besonders sinnvoll.
> Meinetwegen nehme ich auch einen Button.
Nimm einen Button.
> ~~~ JavaScript
> var div = document.getElementById('targetUI');
> newelement = '<li class="selected"> <label name="' + item[0] + '" id="' + item[0] + '">' + item[1] + '</label></li>';
> ~~~
Zu `label` siehe oben. Warum steht da `div` als Variablenbezeichner?
> ~~~ JavaScript
>
> if (div != null) {
> div.innerHTML += newelement;
> ~~~
Das `li` steht für list item. Wenn es sich bei `div` nicht um eine `ol` oder `ul` handelt, dann ist `li` hier falsch, denn Listenelemente müssen Kindelemente einer Liste sein.
Abgesehen davon produzierst du mit `newelement` eine globale Variable. Das möchtest du wahrscheinlich vermeiden und entweder hinter die Deklaration von `div` ein Komma setzen, oder die nächste Zeile mit einem `var` anfangen.
Wenn du einen Transpiler wie Babel benutzt, kannst du übrigens auf die Stringkonkatenation mit dem überladenen Plusoperator verzichten und statt dessen Templateliterale verwenden. [Zu dem Thema](https://forum.selfhtml.org/self/2017/jul/11/umbrueche-in-javascrpipt/1698876#m1698876) habe ich erst kürzlich was geschrieben.
> ~~~ JavaScript
> var elementname = '\"' + item[0] + '\"';
> var myelement= div.getElementsByTagName(elementname);
> ~~~
Was bezweckst du hiermit? Der erste Index des Arrays `item` soll die ID eines Elementes enthalten, nehme ich an, jedenfalls weist du den Wert oben den Attributen
`name` und `id` zu.
Damit rufst du dann die Methode `getElementsByTagName` auf. Das ergibt keinen Sinn. Wie der Name der Methode bereits vermuten lässt, sucht sie Elemente mit einem bestimmten `tagName`.
Der Name eines Tags wäre zum Beispiel `button` für ein Button-Element. Wenn du das Element nicht über sein Tag sondern über seine ID referenzieren willst, ist `getElementsByTagName` nicht die richtige Methode. Dafür gibt es `getElementById` oder auch `querySelector`.
Davon abgesehen, warum baust du double quotes in den String ein? Innerhalb des als Argument übergebenen Strings sollten keine Anführungszeichen stehen, sonst wirst du nicht finden wonach du suchst.
Davon abgesehen, warum escapest du die doppelten Anführungszeichen, wenn du für das Stringliteral ohnehin einfache verwendest?
Sofern das so vom Browser verarbeitet werden soll, kann das nicht wie gewünscht funktionieren.
> ~~~ JavaScript
> if (myelement!= null) {
> ~~~
Die bedingte Anweisung kannst du dir sparen, denn die Bedingung ist hier immer wahr.
Die Methode `getElementsByTagName` gibt grundsätzlich eine HTMLCollection zurück. Wenn keine Elemente mit dem gesuchten Tag gefunden wurden, dann eben eine leere Liste, und die ist immer ungleich `null` und ungleich `undefined`.
> ~~~ JavaScript
> AddEvent(myelement, 'click', function () {
> setAutoComplete(item[0], '\'' + item[1] + '\'', '\'' + parent + '\'', '\'' + idField + '\'') });
> }
> }
> ~~~
Die Funktion `AddEvent` ist irgendwo definiert, nehme ich an.
Sie wird aber vermutlich als erstes Argument keine HTMLCollection erwarten, sondern ein Objekt, das die Schnittstelle `EventTarget` implementiert, also zum Beispiel ein Element.
Du musst übrigens nicht `innerHTML` verwenden, um neue Elemente zu erzeugen. Du kannst auch mit `document.createElement('button')` einen Button erzeugen, dem die gewünschten Eigenschaften hinzufügen und ihn dann beispielsweise mit `appendChild` einem anderen Element als Kind zuweisen.
~~~ JavaScript
const button = document.createElement('button');
button.type = 'button';
button.textContent = item[1];
button.id = item[0];
//...
div.appendChild(button);
button.addEventListener('click', /* ... */);
~~~
Hierbei könntest du dir dann die Referenzierung aus dem DOM sparen, denn eine Referenz bekommst du ja schon von `createElement` zurück.
Viele Grüße,
Orlok
Select Li Element on Keyup
bearbeitet von OrlokHey
> > Für sowas sind `button`s zu verwenden.
>
> Nun habe ich mal nachgeschaut was es denn sonst noch so gibt außer Buttons.
Einiges. Aber für sowas sind `button`s zu verwenden.
> Irgendwo habe ich gelesen A wäre nicht gut für onclick.
Ein `a` Element verwendet man um einen Link zu setzten. Das funktioniert ohne Zutun eines Skripts. Wenn du keinen Link setzen möchtest, ist `a` nicht das richtige Element.
> Aber mal so einfach gefragt, kann man nicht auch ein Label verwenden?
Ein `label` wird verwendet um ein anderes Element zu beschriften. Ein `label` das kein anderes Element beschriftet ist nicht besonders sinnvoll.
> Meinetwegen nehme ich auch einen Button.
Nimm einen Button.
> ~~~ JavaScript
> var div = document.getElementById('targetUI');
> newelement = '<li class="selected"> <label name="' + item[0] + '" id="' + item[0] + '">' + item[1] + '</label></li>';
> ~~~
Zu `label` siehe oben. Warum steht da `div` als Variablenbezeichner?
> ~~~ JavaScript
>
> if (div != null) {
> div.innerHTML += newelement;
> ~~~
Das `li` steht für list item. Wenn es sich bei `div` nicht um eine `ol` oder `ul` handelt, dann ist `li` hier falsch, den Listenelemente müssen Kindelemente einer Liste sein.
Abgesehen davon produzierst du mit `newelement` eine globale Variable. Das möchtest du wahrscheinlich vermeiden und entweder hinter die Deklaration von `div` ein Komma setzen, oder die nächste Zeile mit einem `var` anfangen.
Wenn du einen Transpiler wie Babel benutzt, kannst du übrigens auf die Stringkonkatenation mit dem überladenen Plusoperator verzichten und statt dessen Templateliterale verwenden. [Zu dem Thema](https://forum.selfhtml.org/self/2017/jul/11/umbrueche-in-javascrpipt/1698876#m1698876) habe ich erst kürzlich was geschrieben.
> ~~~ JavaScript
> var elementname = '\"' + item[0] + '\"';
> var myelement= div.getElementsByTagName(elementname);
> ~~~
Was bezweckst du hiermit? Der erste Index des Arrays `item` soll die ID eines Elementes enthalten, nehme ich an, jedenfalls weist du den Wert oben den Attributen
`name` und `id` zu.
Damit rufst du dann die Methode `getElementsByTagName` auf. Das ergibt keinen Sinn. Wie der Name der Methode bereits vermuten lässt, sucht sie Elemente mit einem bestimmten `tagName`.
Der Name eines Tags wäre zum Beispiel `button` für ein Button-Element. Wenn du das Element nicht über sein Tag sondern über seine ID referenzieren willst, ist `getElementsByTagName` nicht die richtige Methode. Dafür gibt es `getElementById` oder auch `querySelector`.
Davon abgesehen, warum baust du double quotes in den String ein? Innerhalb des als Argument übergebenen Strings sollten keine Anführungszeichen stehen, sonst wirst du nicht finden wonach du suchst.
Davon abgesehen, warum escapest du die doppelten Anführungszeichen, wenn du für das Stringliteral ohnehin einfache verwendest?
Sofern das so vom Browser verarbeitet werden soll, kann das nicht wie gewünscht funktionieren.
> ~~~ JavaScript
> if (myelement!= null) {
> ~~~
Die bedingte Anweisung kannst du dir sparen, denn die Bedingung ist hier immer wahr.
Die Methode `getElementsByTagName` gibt grundsätzlich eine HTMLCollection zurück. Wenn keine Elemente mit dem gesuchten Tag gefunden wurden, dann eben eine leere Liste, und die ist immer ungleich `null` und ungleich `undefined`.
> ~~~ JavaScript
> AddEvent(myelement, 'click', function () {
> setAutoComplete(item[0], '\'' + item[1] + '\'', '\'' + parent + '\'', '\'' + idField + '\'') });
> }
> }
> ~~~
Die Funktion `AddEvent` ist irgendwo definiert, nehme ich an.
Sie wird aber vermutlich als erstes Argument keine HTMLCollection erwarten, sondern ein Objekt, das die Schnittstelle `EventTarget` implementiert, also zum Beispiel ein Element.
Du musst übrigens nicht `innerHTML` verwenden, um neue Elemente zu erzeugen. Du kannst auch mit `document.createElement('button')` einen Button erzeugen, dem die gewünschten Eigenschaften hinzufügen und ihn dann beispielsweise mit `appendChild` einem anderen Element als Kind zuweisen.
~~~ JavaScript
const button = document.createElement('button');
button.type = 'button';
button.textContent = item[1];
button.id = item[0];
//...
div.appendChild(button);
button.addEventListener('click', /* ... */);
~~~
Hierbei könntest du dir dann die Referenzierung aus dem DOM sparen, denn eine Referenz bekommst du ja schon von `createElement` zurück.
Viele Grüße,
Orlok