Select Li Element on Keyup

[Orlok]

Hey

Zu label siehe oben. Warum steht da div als Variablenbezeichner?

weil das Ding, in dem sich die Liste befindet, die auch ein <ul> hat, (das du hier nicht sehen kannst, weil ich den Code weggelassen habe) ein Div ist.

Das heißt, ul ist ein Kindelement des referenzierten divs. Oder heißt es, dass in der Variable mit dem Bezeichner div eigentlich eine ul drin ist?

Sofern der Wert der Variable div eine Referenz auf ein gleichnamiges Element ist, führt deine Zuweisung mittels innerHTML dazu, dass li nach dem ul als Kind des div Elements eingefügt wird, und nicht als Kind der Liste. Das wäre ein Fehler.

Wenn die Variable tatsächlich eine Referenz auf die ul enthält und nicht auf das div, solltest du wohl besser einen anderen Bezeichner für die Variable verwenden. ;-)

nachdem id und document.getElementyById(elementname) nicht funktioniert hat, hab ich ein div.getElementsByTagName(elementname) draus gemacht.

Was hast du dir davon versprochen?

Wie gesagt getElementById hat nicht funktioniert.

Dann hätte ich erstmal versucht herauszufinden, warum getElementById nicht funktioniert. Zum Beispiel hätte ich mit einem console.log(elementname) eine Kontrollausgabe gemacht und in der Konsole des Browsers nachgesehen, was tatsächlich in der Variable drin ist.

Hättest du das gemacht, wäre dir aufgefallen, dass da was nicht stimmt.

Ich hab auch das "Tag" von dem Teil überlesen. Es sollte eigentlich getElementsByName heißen.

Das hätte es nicht besser gemacht. Abgesehen vom bereits gesagten, hätte ein solcher Aufruf dein Script mit einem Typfehler terminiert. Die Methode getElementsByName wird nämlich nicht von Elementen implementiert, sondern nur vom Dokumentobjekt.

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.

Reine Unsicherheit ... der Inhalt ist eine Zahl, ich war mir nicht sicher, was der Javascript Compiler daraus macht. Manchmal eben genau das. Eine Zahl, wo es ein String sein soll.

Die Methode getElementById erwartet tatsächlich einen String, aber du kannst auch eine Zahl übergeben. Dann wird implizit die auf Number.prototype definierte Methode toString aufgerufen und die Zahl in eine Zeichenkette umgewandelt.

Du kannst aber auch explizit casten indem du String als Funktion aufrufst.

Wenn du für die Konkatenation von Strings den Plusoperator verwendest, dann werden Ausdrücke die zu einem anderen Datentyp aufgelöst werden grundsätzlich in Strings umgewandelt. Einzige Ausnahme von der Regel sind Symbole, in anderen Sprachen auch als Atoms bekannt.

if (myelement!= null) {

Die bedingte Anweisung kannst du dir sparen, denn die Bedingung ist hier immer wahr.

In diesem Fall mag das sein, aber das war nicht immer so. Sie ist ein Überbleibsel als da noch GetElementById stand, damit wurde kein Element zurückgegeben. myelement war mit GetElementById null.

Beachten: getElementById mit kleinem g. ;-) Ja, der Rückgabewert dieser Methode ist nullable. Es wäre allerdings sehr von Vorteil, wenn du das nächste Mal, wenn du hier Code postest, vorher nochmal drübergehst. Denn sonst beschäftigen wir uns hier gegebenenfalls mit Fehlern die eigentlich gar keine sind.

const button = document.createElement('button');

Ja, das ist schön, aber als Konstante für eine Schleife? Hattest du einen besonderen Anlass, die Elemente hier als Konstante zu deklarieren?

Wenn man modernes JavaScript schreibt, ist es üblich const zu verwenden, wenn die Bindung zwischen Bezeichner und Wert für die Lebenszeit der Variable konstant bleiben soll, also nicht beabsichtigt ist, der Variable später einen anderen Wert zuzuweisen.

Für var gibt es heute eigentlich kaum noch Anwendungsfälle. Wenn eine Konstante aus oben genanntem Grund nicht das Richtige ist, dann würde man die Variable mit let deklarieren.

Variablen die mit var deklariert werden sind immer funktionsweit sichtbar. const und let hingegen besitzen Blockscope. Da es gute Praxis ist, Variablen so lokal wie möglich zu deklarieren, sind const und let hier klar im Vorteil.

for (var index = 0; index < 5; index++) {
  var number = 42;
}

console.log(index, number); // 5, 42

Wenn du wie hier var verwendest, dann existieren die im Schleifenkopf und Scheifenkörper deklarierten Variablen nach der Abarbeitung der Schleife weiter.

for (let index = 0; index < 5; index++) {
  const number = 42;
}

console.log(index, number); // Reference Error

Hier sind die Variable index und die Konstante number an die lexikalische Umgebung des Anweisungsblocks der Schleife gebunden. Der Versuch des Zugriffs außerhalb der Schleife erzeugt eine Ausnahme. Die Konstante number wird hier in jeder Iteration neu initialisiert.

In anderen Sprachen ist es üblich, dass Konstanten etwa nur global deklariert werden können, oder dass ihnen lediglich zur Compilezeit bekannte Werte zugewiesen werden dürfen. Das ist in JavaScript nicht der Fall.

Einer mit const deklarierten Konstante muss bei ihrer Deklaration ein Wert zugewiesen werden, aber konstant ist hier tatsächlich nur die Bindung von Name und Wert. Wenn statt einem skalaren Wert ein Objekt zugewiesen wird, also mithin auch eine Datenstruktur wie ein Array, kann dieses Objekt nach wie vor verändert werden.

Soll auch ein referenziertes Objekt immutable, also unveränderlich gemacht werden, dann müsste dies explizit angefordert werden, etwa mit der Methode freeze des Konstruktors Object.

Die Deklaration mittels var besitzt einige Quirks, die unter Umständen zu schwer auffindbaren Fehlern im Programm führen können. So sind zum Beispiel Mehrfachdeklarationen in der selben lexikalischen Umgebung mit var ohne weiteres möglich. Ebenso die Referenzierung der Variable vor ihrer Deklaration.

Solche potentiell fehlerträchtigen Praktiken sind bei der Verwendung von const und let von vorneherein ausgeschlossen, weswegen man grundsätzlich diese Keywords für die Deklaration von Variablen und Konstanten verwenden sollte.

Sowohl const als auch let werden mittlerweile von den allermeisten Browsern unterstützt. Allerdings kann es nicht schaden, sich vor der Verwendung im Produktiveinsatz nochmal zu informieren, ob alle Browser die man berücksichtigen will, oder muss, die Syntax beherrschen.

Aber das gilt natürlch nur, sofern man den Code vor der Auslieferung nicht ohnehin in ein kompatibles Format übersetzen lässt.

Viele Grüße,

Orlok