Fokus auf dynamisch erstelltes Eingabefeld

[Helmut]

Hallo,

ich bekomme eine Ausnahmefehlermeldung wenn ich versuche, den Focus auf ein soeben erstelltes Eingabefeld zu setzen:

editHandle=document.createElement("input");
(... Diverse Eigenschaftsänderungen)
cHandle.appendChild(editHandle);
editHandle.focus();

Woran liegt's?
Danke

[Der Dicki]

Hallihallo!

Ich weiß zwar nicht, warum das passiert, aber vielleicht hilft es Dir ja schon, wenn Du vor dem Aufruf von appendChild() dem neuen Eingabefeld eine id gibst:

  
   editHandle=document.createElement("input");  
   // (... Diverse Eigenschaftsänderungen), darunter auch  
   editHandle.id="id_des_neuen_inputs";  
   cHandle.appendChild(editHandle);  
   // editHandle.focus();  
   document.getElementById('id_des_neuen_inputs').focus();  

Ich hoffe, das hilft weiter...

Viele liebe Grüße,
Der Dicki

[globe]

n'abend,

editHandle=document.createElement("input");
   // (... Diverse Eigenschaftsänderungen), darunter auch
   editHandle.id="id_des_neuen_inputs";
   cHandle.appendChild(editHandle);
   // editHandle.focus();
   document.getElementById('id_des_neuen_inputs').focus();

  
MythBuster der Stunde:  
  
`document.createElement('p')`{:.language-javascript} liefert eine Referenz auf das erstellte Objekt, nicht das Objekt selbst.  
  
`document.getElementById('eineID')`{:.language-javascript}, sowie alle anderen getElement\* Funktionen, liefert eine Referenz auf das gesuchte Objekt, nicht das Objekt selbst.  
  
~~~javascript
  
// wir erstellen ein Objekt  
var theBody = document.getElementsByTagName( 'body' )[0];  
var newElement = document.createElement( 'p' );  
    newElement.id = 'newID';  
theBody.appendChild( newElement );  
  
// wir holen uns das Objekt  
var theElement = document.getElementById( 'newID' );  
  
/*  
 * hier haben wir nun 2 Referenzen auf das selbe Objekt.  
 * newElement ist die Referenz, die wir beim Erstellen bekommen haben  
 * theElement ist die Referenz, die wir durch getElementById() bekommen haben.  
 * beide verweisen auf das gleiche Objekt  
 * beide Referenzen haben die gleiche Gültigkeit  
 */  

An dieser Stelle ist ein getElement*() also sinnlos, da wir ja bereits eine Referenz auf das Objekt besitzen. JA! diese können wir sogar "speichern". Bspw. in einem Array - um uns später die Hangelei durch den DOM-Tree zu ersparen.

weiterhin schönen abend...

[Der Dicki]

Hallihallo!

An dieser Stelle ist ein getElement*() also sinnlos, da wir ja bereits eine Referenz auf das Objekt besitzen. JA! diese können wir sogar "speichern". Bspw. in einem Array - um uns später die Hangelei durch den DOM-Tree zu ersparen.

Du hast natürlich recht.
Als ich vor gar nicht allzulanger Zeit ein sehr ähnliches Problem hatte, lag es, wie von Dir in Deinem anderen Posting angedeutet, an einer verlorenen Referenz (lokale vs. globale Variablen).

Ich war hier davon ausgegangen, daß hier der gleiche Fehler vorlag, deswegen das erneute einholen der Referenz.
Ich lasse den Browser nämlich lieber ein weiteres Mal durch den DOM- Tree "hangeln", als mir meinen Speicher durch Referenzen, die ich unter Umständen nur ein einziges Mal brauche, vollzumüllen.

Ist vielleicht eine Glaubensfrage, aber ich halte mich am liebsten von globalen Variablen fern, wenn es möglich ist.

Viele liebe Grüße,
Der Dicki

[globe]

n'abend,

Ich lasse den Browser nämlich lieber ein weiteres Mal durch den DOM- Tree "hangeln", als mir meinen Speicher durch Referenzen, die ich unter Umständen nur ein einziges Mal brauche, vollzumüllen.

Solange du nicht gerade von hunderten Elementen sprichst, kann von zumüllen keine Rede sein. Grundsätzlich gilt natürlich auch hier; man braucht es nicht übertreiben.

Ist vielleicht eine Glaubensfrage, aber ich halte mich am liebsten von globalen Variablen fern, wenn es möglich ist.

Wenn du von globalen Variablen sprichst, gehe ich davon aus, dass du nicht arg objektorientiert arbeitest... ich kann dir molilys Artikel über Organisation von Javascripten ans Herz legen. Dort wirst du relativ schnell(*) merken, dass man mit einer modernen Programmcodearchitektur keine (oder nur in sehr begrenztem Maße) globalen Variablen braucht.

(*) sofern man es schafft molilys ellenlange Artikel schnell zu lesen

weiterhin schönen abend...

[Der Dicki]

Hallihallo!

Wenn du von globalen Variablen sprichst, gehe ich davon aus, dass du nicht arg objektorientiert arbeitest... ich kann dir molilys Artikel über Organisation von Javascripten ans Herz legen. Dort wirst du relativ schnell(*) merken, dass man mit einer modernen Programmcodearchitektur keine (oder nur in sehr begrenztem Maße) globalen Variablen braucht.

In C++ und PHP, beides relativ frisch gelernt, arbeite ich durchaus objektorientiert. In Javascript habe ich leider das Problem, daß ich "damals" von OOP keine Ahnung hatte und deshalb reinweg mit Funktionen hantiert habe. Das hat sich eingebrannt, und dementsprechend schwer fällt es mir nun, den Einstieg in OOP mit Javascript zu finden.
Aber ich gebe Dir recht, der genannte Artikel steckt schon seit ein paar Tagen in meinen Lesezeichen. Sobald ich Zeit habe, werde ich ihn mir verinnerlichen. Vielleicht bringt er ja die Erleuchtung...

Viele liebe Grüße,
Der Dicki

[globe]

n'abend,

Hallo,

ich bekomme eine Ausnahmefehlermeldung wenn ich versuche, den Focus auf ein soeben erstelltes Eingabefeld zu setzen:
[...]
Woran liegt's?

Ich schätze mal an deinem Javascript.
Zum Testen habe ich folgendes fabriziert - und es funktioniert reibungslos:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">  
<title>New document</title>  
<script type="text/javascript">  
 window.onload = function()  
 {  
  var formthing = document.getElementById( 'bla' );  
  var inpt = document.createElement( 'input' );  
  formthing.appendChild( inpt );  
  inpt.focus();  
 };  
</script>  
</head>  
<body>  
  
 <form name="bla" id="bla">  
  <input name="test"><br />  
  <input name="test"><br />  
  <input name="test"><br />  
  <input name="test"><br />  
 </form>  
</body>  
</html>

Vergleiche den obigen Test mit deinem Code und versuche herauszufinden, was du evtl. anders machst (z.b. "var" zur Deklaration einer Variable auslassen, oder deine Funktion aufrufen, bevor die Seite komplett geladen wurde, o.ä.).

weiterhin schönen abend...

[helmut]

Ok es klappt. Unter gewissen Umständen war ein Handle wirklich ungültig, daran lags. Danke