this.form has no properties

[Marcel]

Hallo,

habe bereits diverse Beiträge über google gefunden und gelesen, aber alle sind an meinem Problem knapp vorbei. Einen sehr ähnlichen Beitrag habe ich hier im Archiv gefunden, aber auch dieser trifft es nicht ganz, daher frag ich hier nochmal.

Ich habe ein <form name="formname"> mit 3 <input /> Feldern und einer <textarea>. Die textarea enthält das Attribut "onkeyup". Gemäß eines Codeschnippsels soll man schreiben:
  <textarea onkeyup="EineFunktion(this)">

und die Funktion ist:
function EineFunktion(this) {
  var foo = this.form.Ausgabe.value
  this.form.Ausgabe.value=foo+1;
}

Das ganze soll also mit jedem Tastendruck um 1 erhöht werden. Das z. B. Shift ebenfalls den onkeyup Event auslöst aber keinerlei Inhalt hinterlässt ist mir an dieser Stelle zunächst egal. Das wird an anderer Stelle behandelt. Mir geht es um das "this". In der Funktionsdeklaration "EineFunktion(this)" ist es, so habe ich bereits herausgefunden, sehr "unglücklich", weshalb ich es dort bereits durch foobar ersetzt habe. Nun erhalte ich nur noch den Fehler "this.form has no properties". Ersetze ich in der Funktion "this.form" durch "document.formname" klappt es wunderbar.

Meine Frage ist daher, an welcher Stelle ich this falsch/unvollständig und wie ich es stattdessen richtig verwende. Die Dokumentation zu "this" ist leider nicht sehr umfassend und bei google sucht man die Nadel im Heuhaufen, wenn man nicht genau weiß, wie man die Suchanfragen zu formulieren hat. :-(

Gruß,
Marcel

[wahsaga]

hi,

<textarea onkeyup="EineFunktion(this)">

OK, damit wird die Referenz auf die Textarea an die Funktion übergeben.

und die Funktion ist:
function EineFunktion(this) {
  var foo = this.form.Ausgabe.value
  this.form.Ausgabe.value=foo+1;

Hier liegt der Fehler. this ist reserviert, in diesem Falle zeigt es auf das Funktions-Objekt.
Nutze this _nicht_ als Namen für eigene Objekte, Variablen, Parameter oder sonstwas.

Du willst die Referenz auf ein Formularelement übergeben - also nenne den Parameter doch beispielsweise auch so:

function EineFunktion(element) {
  var foo = element.form.Ausgabe.value
  element.form.Ausgabe.value=foo+1;

gruß,
wahsaga

[molily]

Hallo,

Hier liegt der Fehler. this ist reserviert, in diesem Falle zeigt es auf das Funktions-Objekt.

Nicht ganz; this zeigt nicht auf die Funktion selbst, sondern auf das Objekt, dem die Funktion anhängt bzw. auf den Kontext, in dem die Funktion ausgeführt wird.

Das Funktionsobjekt selbst kann man im Funktionskörper übrigens über arguments.callee ansprechen.

Mathias

[Marcel]

Hab es mal wieder erst beim zweiten Mal lesen und genau hinschauen verstanden. Danke für's Augenöffnen.

Bis zur nächsten Frage. Gruß,
Marcel

[molily]

Hallo,

function EineFunktion(this) {
  var foo = this.form.Ausgabe.value

this verweist in der Funktion immer auf window, du kannst keinen Parameter so nennen. window.form gibts natürlich nicht.

In der Funktionsdeklaration "EineFunktion(this)" ist es, so habe ich bereits herausgefunden, sehr "unglücklich", weshalb ich es dort bereits durch foobar ersetzt habe.
Nun erhalte ich nur noch den Fehler "this.form has no properties".

Das übergebene Elementobjekt steht dann unter foobar zur Verfügung, also musst du auch damit arbeiten (foobar.form).

Allgemein:

Wenn du JavaScript-Logik im HTML notierst nach dem Schema <element onevent="...">...</element>, dann hast du im JavaScript-Code, der im onevent-Attribut steht, Zugriff auf das Elementobjekt über »this«.

Wenn du darin jetzt irgendeine Funktion aufrufst, so wird diese Funktion nicht mehr im Kontext des Elementobjektes ausgeführt, wie es für den JavaScript-Code im Attribut der Fall ist. Das heißt, »this« zeigt darin *nicht* auf mehr das Elementobjekt, sondern auf window (das oberste/globale Objekt).

Wenn man also eine Handler-Funktion auf diese Weise aufruft und darin das Elementobjekt braucht, übergibt man ihr mit »this« eine Referenz auf das Elementobjekt, bei dem der Event passiert bzw. vorbeikommt:

onevent="handler(this)"

Die Handlerfunktion muss diesen Parameter dann entgegennehmen. Die Variable, unter der der Parameter innerhalb der Funktion gespeichert wird, kann aber nicht wieder »this« heißen, sondern z.B. »elementobjekt«:

function handler (elementobjekt) {
   alert(elementobjekt);
   // hingegen:
   alert(this);
}

this ist ein reserviertes Wort, das in diesem Fall auf das window-Objekt zeigt.

Mathias