Funktions Problem this

[Jutta]

Hallo,
ich habe folgendes Script welches natürlich nicht funktioniert?
An dem ich auch schon 2 Tage ausprobiere aber momentan kein Stück weiterkomme...

Irgendwas ist bei der Funktionaufruf / Übergabe von ChangeText(txt,obj); falsch?

---- schnipp -----

<script language="JavaScript">

var aktiveZeile=false;
   function ChangeCol(objekt)
   {
   if(objekt.id!=aktiveZeile)
    {
    objekt.style.backgroundColor="#cccccc";
    }
   }

function ChangeText(txt,obj)
   {

var txt = "if(aktiveZeile){document.getElementById(aktiveZeile).style.backgroundColor='#cccccc';}
    aktiveZeile=this.id;
    ChangeTxt('text 1');
    this.style.color='black';";

this.id = txt;
   }

</script>

<table>
   <tr style="background: #cccccc;"
    onmouseover="this.style.cursor='hand' ; this.style.backgroundColor='green' ; status='over 1'"
    onmouseout="ChangeCol(this)  ; status=''"

onclick="ChangeText('txt',this);"
    id="tab1">

<td>
   1111
   </td>
   </tr>
   </table>

<table>
   <tr style="background: #cccccc"
    onmouseover="this.style.cursor='hand' ; this.style.backgroundColor='green' ; status='over 2'"
    onmouseout="ChangeCol(this)  ; status=''"

onclick="ChangeText('txt',this);"
    id="tab2">

<td>
   2222
   </td>
   </tr>
   </table>

<table>
   <tr style="background: #cccccc;"
    onmouseover="this.style.cursor='hand' ; this.style.backgroundColor='green' ; status='over 3'"
    onmouseout="ChangeCol(this)  ; status=''"

onclick="ChangeText('txt',this);"
    id="tab3">

<td>
   3333
   </td>
   </tr>
   </table>

----- schnapp -------

[Cheatah]

Hi,

function ChangeText(txt,obj)
   {

[...]

aktiveZeile=this.id;

"this" ist der aktuelle Kontext - also die Funktion. Sie verfügt jedoch über keine Eigenschaft namens "id" ...

this.style.color='black';";

... geschweige denn "style", so dass der Versuch eines Zugriffs auf "ChangeText.style.color" eine Exception schmeißt.

[...]

Davon abgesehen sehe ich keinen tabellarischen Daten, die die Struktur einer Tabelle rechtfertigen könnten, und dem <script>-Tag fehlt das zwingend benötigte type-Attribut. "hand" ist ferner kein gültiger Wert für die cursor-Eigenschaft. Die Manipulation der Statuszeile (bzw. dessen Versuch) solltest Du *dringend* vollständig eliminieren.

Cheatah

[Jutta]

Danke für Deine schnelle Hilfe mit der ich aber nichts anfangen kann.

Soweit war ich heute und gestern auch schon...

Abgesehen davon handelt es sich hier um ein Test Script aus dem Grund habe ich auch das status script für meine Anfrage hier im Forum auch entfernt, weil es mit meinem eigentlichen Problem nichts zutun hat. Und dass das <script>- falsch ist weiß ich auch nur hat es mit meinem eigentlichen Problem nichts zu tun.

tabellarischen Daten, die die Struktur einer Tabelle rechtfertigen könnten

Das ist meine Tabelle mehr gibt es nicht.

Vorher stand anstatt dem funktionsaufruf folgender Code in onclick der auch funktioniert hat.

onclick="if(aktiveZeile){document.getElementById(aktiveZeile).style.backgroundColor='#cccccc';}
    aktiveZeile=this.id;
    ChangeTxt('text 1');
    this.style.color='black';

Nun soll mit meiner Funktion einfach nur der Code bei jedem Aufruf aus der Funktion geladen werden bzw. this durch txt ausgetauscht werden.

[Ole]

Hi

Cheatah schrieb:

"this" ist der aktuelle Kontext - also die Funktion. Sie verfügt jedoch über keine Eigenschaft namens "id" ...

siehe dazu http://de.selfhtml.org/javascript/sprache/objekte.htm#this

wenn du "this" inerhalb eines elementes mit einem eventhandler (bei dir in der anscheinend ursprünglichen Fassung "onclick") nutzt, bezieht sich "this" auf das Element.
Du nutzt es aber in einer Funktion, also bezieht sich dein "this" auf die Funktion und diese Funktion hat kein Attribut "id" (eigentlich hat sie afaik garkeine Attribute, ist immerhin eine JS-Funktion und kein HTML-Tag).

Um den Wert den "this" enthalten soll in deiner ausgegliederten Funktion nutzen zu können mußt du "this" im Kontext des HTML-Elements nutzen und den Wert als Variable übergeben.

so long
ole
(8-)>

[Jutta]

Hallo!

Um den Wert den "this" enthalten soll in deiner ausgegliederten Funktion nutzen zu können mußt du "this" im Kontext des HTML-Elements nutzen und den Wert als Variable übergeben.

das habe ich inzwischen halb verstanden und was neues gebaut was aber auch falsch ist?

---- schnipp ---

[...]

function ChangeText(obj.id)
   {

var obj = "if(aktiveZeile){document.getElementById(aktiveZeile).style.backgroundColor='#cccccc';}
    aktiveZeile=this.id;
    ChangeTxt('text 1');
    this.style.color='black';";

obj.id = txt;
   }

</script>

<table>
   <tr style="background: #cccccc;"
    onmouseover="this.style.cursor='hand' ; this.style.backgroundColor='green' ; status='over 1'"
    onmouseout="ChangeCol(this)  ; status=''"

onclick="ChangeText(this);"
    id="tab1">

<td>
   1111

[...]

---- schnapp ----

[Ole]

Hi

function ChangeText(obj.id)

gib deiner Variable einen griffigeren Namen, ohne punkt etc. z.B. OBJID (immer Groß- und Kleinschreibung beachten).

aktiveZeile=this.id;
    this.style.color='black';";

du verwendest immernoch "this" innerhalb der Funktion.

onclick="ChangeText(this);"

wenn du mit einer ID arbeiten willst, solltest du diese auch übergeben.

so long
ole
(8-)>

[Jutta]

Hallo !

function ChangeText(obj.id)

anstatt this habe ich meine Objekt mit Objekt.id angesprochen

Wie soll ich denn sonst die id übergeben?

gib deiner Variable einen griffigeren Namen, ohne punkt etc. z.B. OBJID (immer Groß- und Kleinschreibung beachten).

das soll in dem Sinne auch keine Variable sein sondern ein Obkejt aber das scheint nicht zu gehen?

aktiveZeile=this.id;
    this.style.color='black';";

du verwendest immernoch "this" innerhalb der Funktion.

in einer anderen Funktion arbeite ich doch auch mit mit this und dort geht es ja.

onclick="ChangeText(this);"

wenn du mit einer ID arbeiten willst, solltest du diese auch übergeben.

und wie soll dann die id heissen? die heißt doch in jeder zeile immer anders (zB. tab1 , tab2 )

[Cheatah]

Hi,

Wie soll ich denn sonst die id übergeben?

Du übergibst ein Objekt. Dieses _ist_ entweder die ID (und _nur_ die ID), oder es _enthält_ sie, was bei der Übergabe selbst völlig uninteressant ist.

das soll in dem Sinne auch keine Variable sein sondern ein Obkejt

Eine Variable _ist_ ein Objekt. Immer.

in einer anderen Funktion arbeite ich doch auch mit mit this und dort geht es ja.

Dann veränderst Du aber die Funktionsinstanz. Oder es ist nicht in einer Funktion.

onclick="ChangeText(this);"
wenn du mit einer ID arbeiten willst, solltest du diese auch übergeben.
und wie soll dann die id heissen? die heißt doch in jeder zeile immer anders (zB. tab1 , tab2 )

Der Einwand war irreführend. Das von Dir übergebene Objekt enthält - direkt oder indirekt - die ID.

Cheatah

[Jutta]

onclick="ChangeText(this);"
wenn du mit einer ID arbeiten willst, solltest du diese auch übergeben.
und wie soll dann die id heissen? die heißt doch in jeder zeile immer anders (zB. tab1 , tab2 )

Der Einwand war irreführend. Das von Dir übergebene Objekt enthält - direkt oder indirekt - die ID.

Und wie spreche / übergebe ich nun die ID an wenn ich es nicht mit this machen darf?

ich habe es nun so gemacht aber das ist auch falsch soweit war ich gestern auch schon einmal...

[...]

function ChangeText(txt)
   {

var txt = "if(aktiveZeile){document.getElementById(aktiveZeile).style.backgroundColor='#cccccc';}
    aktiveZeile=this.id;
    ChangeTxt('text 1');
    this.style.color='black';";

return txt;
   }

</script>

<table>
   <tr style="background: #cccccc;"
    onmouseover="this.style.cursor='hand' ; this.style.backgroundColor='green' ; status='over 1'"
    onmouseout="ChangeCol(this)  ; status=''"

onclick="ChangeText(txt1);"
    id="tab1">

<td>
   1111
   </td>
   </tr>
   </table>

<table>
   <tr style="background: #cccccc"
    onmouseover="this.style.cursor='hand' ; this.style.backgroundColor='green' ; status='over 2'"
    onmouseout="ChangeCol(this)  ; status=''"

onclick="ChangeText(txt2);"
    id="tab2">

<td>
   2222
   </td>
   </tr>
   </table>

[...]

[Cheatah]

Hi,

Und wie spreche / übergebe ich nun die ID an wenn ich es nicht mit this machen darf?

die Übergabe erfolgt mit this in eine Variable eines von Dir gewählten Namens. _Nach_ der Übergabe ist this etwas anderes und daher nicht mehr zu verwenden.

ich habe es nun so gemacht aber das ist auch falsch

Solange Du innerhalb der Funktion auch nur ein einziges Mal this verwendest, wird sich das auch nicht ändern.

onmouseover="this.style.cursor='hand' ;

Die anderen von mir genannten Fehler, ob sie nun mit Deinem speziellen akuten Problem zu tun haben oder nicht, sind nach wie vor _Fehler_ und daher korrigierenswürdig. Und zwar alle.

Cheatah

[Jutta]

Hi,

Und wie spreche / übergebe ich nun die ID an wenn ich es nicht mit this machen darf?

die Übergabe erfolgt mit this in eine Variable eines von Dir gewählten Namens. _Nach_ der Übergabe ist this etwas anderes und daher nicht mehr zu verwenden.

Du wiedersprichst Dich nun mit dem this erst darf ich es nicht benutzen und nun soll ich es benutzen was denn nun?

In der Funktion darf ich es nicht benutzen und außerhalb auch nicht aber wie schon in meinem anderen Posting geschrieben mit Code Anhang wie soll ich denn nun meine Variable übergeben? Ist mein Ansatz richtig oder was ist nun falsch?

ich habe es nun so gemacht aber das ist auch falsch

Solange Du innerhalb der Funktion auch nur ein einziges Mal this verwendest, wird sich das auch nicht ändern.

onmouseover="this.style.cursor='hand' ;

abgesehen davon befindet sich der Code sich auch in nicht in meiner Funktion! (falsch kopiert)

Das befindet sich in meiner Funktion:

aktiveZeile=this.id;

Nur wie soll ich das this obejekt sonst nennen damit das objekt eindeutig bleibt?

Die id heißt id="tab1" oder id="tab2" oder id="tab3"

Die anderen von mir genannten Fehler, ob sie nun mit Deinem speziellen akuten Problem zu tun haben oder nicht, sind nach wie vor _Fehler_ und daher korrigierenswürdig. Und zwar alle.

Zu den anderen Fehlern, die sind mir bekannt aber es handelt sich wie gesagt nur um ein TestScript das original sieht anders aus.

[Cheatah]

Hi,

die Übergabe erfolgt mit this in eine Variable eines von Dir gewählten Namens. _Nach_ der Übergabe ist this etwas anderes und daher nicht mehr zu verwenden.
Du wiedersprichst Dich nun mit dem this

keineswegs.

erst darf ich es nicht benutzen und nun soll ich es benutzen was denn nun?

Du darfst/sollst es _an der richtigen Stelle_ benutzen. Der Browser enthält keine Magie, die ihm erlaubt, bei Verwendung von "this" genau das zu nehmen, was Du gerade gerne haben möchtest. "this" ist "this" - also "dies", nicht "etwas früheres" oder so.

In der Funktion darf ich es nicht benutzen

Richtig. Es sei denn, Du meinst die Funktion selbst, denn die ist dann "this".

und außerhalb auch nicht

Wo hat wer das gesagt?

aber wie schon in meinem anderen Posting geschrieben mit Code Anhang wie soll ich denn nun meine Variable übergeben?

Mit "this".

Ist mein Ansatz richtig

Ja.

oder was ist nun falsch?

Die Verwendung von "this" innerhalb der Funktion.

Das befindet sich in meiner Funktion:
aktiveZeile=this.id;

Hier versuchst Du, einer Variable eine Eigenschaft _der Funktion_ zuzuweisen, die nicht existiert.

Nur wie soll ich das this obejekt sonst nennen damit das objekt eindeutig bleibt?

Warum gefällt Dir "objekt" auf einmal nicht mehr?

Die id heißt id="tab1" oder id="tab2" oder id="tab3"

Nein, die Funktionsinstanz besitzt keine ID.

Cheatah

[Jutta]

Hi,

die Übergabe erfolgt mit this in eine Variable eines von Dir gewählten Namens. _Nach_ der Übergabe ist this etwas anderes und daher nicht mehr zu verwenden.
Du wiedersprichst Dich nun mit dem this

keineswegs.

erst darf ich es nicht benutzen und nun soll ich es benutzen was denn nun?

Du darfst/sollst es _an der richtigen Stelle_ benutzen. Der Browser enthält keine Magie, die ihm erlaubt, bei Verwendung von "this" genau das zu nehmen, was Du gerade gerne haben möchtest. "this" ist "this" - also "dies", nicht "etwas früheres" oder so.

»»

verarschen kann ich mich auch selber! mir ist klar das du mehr weißt als ich. aber ohne ein konkretes beispiel komme ich hier nicht weiter nur wenn du mir this mit this erklären willst dann bringst du mich ganz durcheinader.

einmal soll ich this benutzen und dann doch nicht und auf doofe laberei kann ich getrost verzichten!

besonders hochnäsige besserwisser die einen nicht helfen wollen die sollen dann doch besser den mund halten!

und außerhalb auch nicht

Wo hat wer das gesagt?

ja das hast du geschrieben, wenn du schon mit beispielen kommst dann solltest du auch den richtigen code kopieren und mir nicht den  code ausserhalb von funktion als falsch deklarieren aber das habe ich ja bereits schon geschrieben:

»»Solange Du innerhalb der Funktion auch nur ein einziges Mal this
»»verwendest, wird sich das auch nicht ändern.

onmouseover="this.style.cursor='hand' ;

wie gesagt wer lesen kann ist klar im vorteil!

wie gesagt mit blöde laberei wirst du nie freunden finden!

[wahsaga]

hi,

besonders hochnäsige besserwisser die einen nicht helfen wollen die sollen dann doch besser den mund halten!

schade, bis gerade eben wollte ich dir noch einen tipp geben.

aber die gefahr, dann auch in diese kategorie eingestuft zu werden, ist mir einfach zu hoch ...

gruß,
wahsaga

[jutta]

finde ich auch schade...

weil ich inzwischen gar nichts mehr weiß nachdem mich Cheatah ganz durcheinander gebracht hat und mir irgendwas um den brei erzählen wollte...

wie gesagt theorie und praxis sind 2 welten wobei Cheatah dazu bestimmt auch noch einwände hätte?

gegen hilfe ist ja auch nichts einzuwenden aber nur kluge sprüche wo jede zeile mit theoretischer sprache erklärt wird, das verstehe ich leider nicht.

es macht wenn überhaupt erst bei mir klick wenn ich bespiele sehe die ich nachvollziehen kann. aber mich nur auf fehler hinzuweisen wo ich selber nicht weiß wie ich sie richtig lösen das hilft mir nicht weiter.

[Jutta]

ich habe nun mal in der Wanne überlegt... Ich glaube das war alles falsch ich muß das mit eval lösen?

[wahsaga]

hi,

ich habe nun mal in der Wanne überlegt... Ich glaube das war alles falsch ich muß das mit eval lösen?

n-e-e-e-i-e-n!

eval is evil - das sollte man eigentlich nie einsetzen!
(unperformant und erhöht die fehleranfälligkeit)

gruß,
wahsaga

[Jutta]

hi,

ich habe nun mal in der Wanne überlegt... Ich glaube das war alles falsch ich muß das mit eval lösen?

n-e-e-e-i-e-n!

eval is evil - das sollte man eigentlich nie einsetzen!
(unperformant und erhöht die fehleranfälligkeit)

gruß,
wahsaga

hallo wahsaga

die erklärung ist super! da verstehe ich auch was gemeint ist, mag ja sein das dein kollege mir das selbe sagen wollte aber aus wortfetzen kann ich mir halt kein bild machen.

und meine weiteren offenen fragen haben sich damit glaub auch von selbst erklärt, weil ich es jetzt erst richtig verstehe bzw. eine bestätigung dafür bekommen habe was richtig ist.

jetzt habe ich wenigsten eine basis wo ich drauf aufbauen kann.

deine erklärung habe ich mir für meine akten ausgedruckt! ;)

und für heute ist dann auch erstmal schluss, manchmal ist es besser wenn man aufhört und am nächsten tag weiter macht dann klappt es meist von selbst...

ansonsten melde ich mich nochmals

vielen dank!

gruss jutta

[wahsaga]

hi,

es macht wenn überhaupt erst bei mir klick wenn ich bespiele sehe die ich nachvollziehen kann. aber mich nur auf fehler hinzuweisen wo ich selber nicht weiß wie ich sie richtig lösen das hilft mir nicht weiter.

na schön, dass worauf dich cheatah hinweisen wollte, noch mal ein wenig anders dargestellt:

function foo() {
  this.methode();
}

this bezieht sich hier auf die funktion, als kannst du das hier nicht brauchen - die funktion kennt die methode, die du anwenden möchtest nicht.

wenn du aber direkt an dem element, mit dem du arbeiten willst, this benutzt - _dann_ zeigt es auf das element.

<tr onClick="alert(this);" ...>

(wenig sinnvolles beispiel, nur zur verdeutlichung.)

wenn du jetzt also in deiner funktion mit diesem "<tr>" arbeiten willst, musst du es irgendwie an die funktion übergeben bekommen.

function foo(objekt) {
  objekt.methode();
}

<tr onClick="foo(this);" ...>

so, hier wird jetzt beim aufruf this an die funktion übergeben - da wir uns direkt im <tr> befinden, zeigt this an dieser stelle jetzt auf das <tr>.

wenn du in deiner funktion jetzt objekt ansprichst - dann zeigt es natürlich immer noch auf dieses <tr> - weil wir ja beim _aufruf_ der funktion das this übergeben haben, was bezug auf das <tr> hatte.

jetzt klarer?

gruß,
wahsaga

[wahsaga]

hi,

var obj = "if(aktiveZeile){document.getElementById(aktiveZeile).style.backgroundColor='#cccccc';}
    aktiveZeile=this.id;
    ChangeTxt('text 1');
    this.style.color='black';";

was soll das denn?
wieso möchtest du javascript-code in einem _string_ ablegen und einer variablen zuweisen?

gruß,
wahsaga

[Jutta]

was soll das denn?
wieso möchtest du javascript-code in einem _string_ ablegen und einer variablen zuweisen?

Hi!

Weil ich nicht in jeder Zeile soviel Code haben will, wenn ich dann z.B. 300 Zeilen habe dann kann ich den Aufruf auch auf eine Funktion auslagern.

So würde nämlich mein code pro Zeilen aussehen:
   <tr style="background: #cccccc;"
    onmouseover="this.style.cursor='hand' ; this.style.backgroundColor='green' ; status='over 1'"
    onmouseout="ChangeCol(this)  ; status=''"

onclick="if(aktiveZeile){document.getElementById(aktiveZeile).style.backgroundColor='#cccccc';}
    aktiveZeile=this.id;
    ChangeTxt('text 1');
    this.style.color='black';"
    id="tab1">

<td>
   1111
   </td>
   </tr>

[Struppi]

OK, nochmal von Anfang an:

<tr style="background: #cccccc;"
    onmouseover="this.style.cursor='hand' ; this.style.backgroundColor='green' ; status='over 3'"
    onmouseout="ChangeCol(this)  ; status=''"

onclick="ChangeText('txt',this);"
    id="tab3">

Hier ist *this* der Zeiger auf das Objekt von wo aus du die Funktion aufrufst. Konkret ist es das <tr> element.

Zur Verdeutlichung:
<tr  onclick="alert(this.id);" id="tab3">

In deiner funktion ist this die Funktion selber

function ChangeText(txt,obj)
{
   aktiveZeile=this.id;
}

Das ist falsch, denn die Funktion hat keine id!

<tr style="background: #cccccc;"
    onmouseover="this.style.cursor='hand' ; this.style.backgroundColor='green' ; status='over 3'"
    onmouseout="ChangeCol(this)  ; status=''"

onclick="ChangeText('txt',this);"
    id="tab3">

Wenn du jetzt den Hinweisen der Besserwisser nachgehen würdest und zum Beispiel dich fragen, was hier mit dem this passiert solltest du zumindest ein Teil deines Problems lösen.

Ein großes Problem für dein Verständnis ist, der Unterschied zwischen JS Code in einem HTML Event Handler (onclick="ChangeText('txt',this);") und JS Code im Skriptblock.

Nur im HTML Block muss JS code von Anführungszeichen umgeben werden um ihn vom restlichen HTML Code abzugrenzen.

Innerhalb eines Skriptblocks ist das einfach String und kein Code, also überflüssig.

Du müßtest bei deinem Code auch eine Fehlermeldung erhalten http://glasgoogle.de sagt dir wie und sinnvollerweise nutzt du Mozilla um JS zu entwickeln da die Fehlermeldungen wesentlich aussagekräftiger sind.

Aber!

Alles in allem ist das was du vorhast sowieso nicht ratsam. Du willst einen Lnk nur per JS Verfügbar machen, das ist kontraproduktiv und es besteht auch keine notwendigkeit dazu.
schau dir mal an, was man mit CSS alles für Effekte erzielen kann ohne eine Zeile JS http://css.maxdesign.com.au/listamatic/

und wenn dir das zu kompliziert ist, dein Problem liesse sich in etwa auch so lösen:

HTML:
<table id="menu">
<tr>

<td><a href="#">link</A></td>

</tr>

</table>

CSS:

#menu a:link{
display:block;
background-color:green;
}

#menu a:hover{
display:block;
background-color:#ccc;
}

Struppi.

[Gernot Back]

Hallo Jutta,

schau doch einfach noch einmal genauer, was ich dir in dem ersten von dir initiierten Thread zu deinem Problem schon geschrieben habe.

Bei der Beschreibung der Funktionen habe ich sie dort ich auf dein Problem reduziert. In erweiterter Form funktionieren sie auf http://www.overandover.de im Zusammenspiel mit den entsprechenden Event-Handlern in den Tabellenzeilen. Sie rufen dort jeweils Funktionen auf, denen die ID der entsprechenden Zeile als Übergabeparameter mitgegeben wird.

<tr onMouseOver="rein(this.id)" onMouseOut="raus(this.id)" id="cruelsummer">

Du könntest wohl auch jeweils nur das Objekt mit "this" übergeben und dann in der Funktion mit der entsprechenden id des Objekts weiterarbeiten. Das wäre wohl eleganter und du hättest weniger Tipparbeit. Die drei extra Zeichen läppern sich ja je nach Tabellenlänge.

Gruß Gernot