Select Li Element on Keyup
bearbeitet von OrlokHey
> > 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 `div`s. 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, das 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.
> > > ~~~ JavaScript
> > > 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.
> > ~~~ JavaScript
> > 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.
~~~ JavaScript
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.
~~~ JavaScript
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
Select Li Element on Keyup
bearbeitet von OrlokHey
> > 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 `div`s. 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, das 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.
> > > ~~~ JavaScript
> > > 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.
> > ~~~ JavaScript
> > 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.
~~~ JavaScript
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.
~~~ JavaScript
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` deklarierte 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
Select Li Element on Keyup
bearbeitet von OrlokHey
> > 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 `div`s. 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, das 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.
> > > ~~~ JavaScript
> > > 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.
> > ~~~ JavaScript
> > 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.
~~~ JavaScript
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.
~~~ JavaScript
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 sie als Wert lediglich zur Compilezeit bekannte Werte zugewiesen bekommen dürfen. Das ist in JavaScript nicht der Fall.
Einer mit `const` deklarierte 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