Select Li Element on Keyup

[Orlok]

Hey

Für sowas sind buttons zu verwenden.

Nun habe ich mal nachgeschaut was es denn sonst noch so gibt außer Buttons.

Einiges. Aber für sowas sind buttons zu verwenden.

Irgendwo habe ich gelesen A wäre nicht gut für onclick.

Ein a Element verwendet man um einen Link zu setzen. 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.

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?

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 habe ich erst kürzlich was geschrieben.

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.

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.

    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.

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