this.innerHTML in externer Datei

[Jean Pascal]

Guten Tag,

ich habe hier etwas Code, den ich gerne in einer externen js-Datei auslagern möchte:

<p onMouseOver="this.innerHTML = 'test2'" onMouseOut="this.innerHTML = 'test'">test</p>

Da die Zeichenketten test und test2 am Ende etwas länger werden, würde ich sie also gerne als Funktionen hereinladen. In etwa so:

<p class="menu" onMouseOver="show()" onMouseOut="hide()">test</p>

extern:
function show () {this.innerHTML = 'test2';}
function hide () {this.innerHTML = 'test';}

Und diese Variante funktioniert in der Form leider noch nicht. Kann mir eventuell jemand erklären, welchen Fehler ich gemacht habe?

Vielen Dank.

Jean

[Ashura]

Hallo Jean.

<p class="menu" onMouseOver="show()" onMouseOut="hide()">test</p>

extern:

function show () {this.innerHTML = 'test2';}

function hide () {this.innerHTML = 'test';}

>   
> Und diese Variante funktioniert in der Form leider noch nicht. Kann mir eventuell jemand erklären, welchen Fehler ich gemacht habe?  
  
Du übergibst keine Referenz auf das p-Element.  
  
Das this in obigen beiden Funktionen steht mangels dieser Referenz für die oberste Objektinstanz, also dem window-Objekt.  
  
Du musst schon this als Parameter an die beiden Funktionen übergeben und damit weiter arbeiten.  
  
  
Einen schönen Mittwoch noch.  
  
Gruß, Ashura  

-- 
sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:} fl:( ss:) ls:[ js:|  
[<mathbr:del.icio.us/>](http://del.icio.us/mathbr) [<mathbr:w00t/>](http://w00t.noctus.net)

[Jean Pascal]

Hallo Ashura,

erstmal danke.

Ich bin davon ausgegangen, dass die Funktion einfach das "hereinlädt", was ich in der externen Datei innerhalb der Funktion stehen habe (womit es ja funktioniert hätte).

Mir ist nicht klar, wie ich auf p referenzieren kann. "this" als Parameter? Parameter werden doch über die Klammer nach der Funktion übergeben, oder? Wenn ich das dort reinschreibe gibt es keine Auswirkung (Ich weiß, hier fehlt es wohl an Basiswissen).

Gruß Jean

[wahsaga]

hi,

"this" als Parameter? Parameter werden doch über die Klammer nach der Funktion übergeben, oder? Wenn ich das dort reinschreibe gibt es keine Auswirkung

Dann solltest du vielleicht deine Funktion a) mit einem Parameter deklarieren, und b) diesen innerhalb der Funktion auch verwenden.

gruß,
wahsaga

[Jean Pascal]

Danke. Jean

[molily]

Hallo,

<p class="menu" onMouseOver="show()" onMouseOut="hide()">test</p>
function show () {this.innerHTML = 'test2';}

Und diese Variante funktioniert in der Form leider noch nicht. Kann mir eventuell jemand erklären, welchen Fehler ich gemacht habe?

Siehe die Bedeutung von this beim Event-Handling (englisch).

this verweist, wenn es in einer Funktion verwendet wird, die ganz normal aufgerufen wird, auf das Objekt window (denn diese Funktion ist eine Methode von window).

Du hast zwei Möglichkeiten:

1. Du registrierst die Event-Handler-Funktion mit JavaScript, indem du das Element ansprichst und in der onmouseover- bzw. onmouseout-Eigenschaft die Handler-Funktion speicherst. Die Funktion ist dann sozusagen eine Methode des Elementobjektes (siehe Link). Wenn das Ereignis eintritt zeigt this somit auf das Elementobjekt.

function funktion () {
   alert(this);
}
document.getElementById("id").onmouseover = funktion;

2. Wenn du unbedingt mit den HTML-Attributen onmouseover und onmouseout arbeiten willst, also die JavaScript-Logik nicht auslagern kannst/willst, musst du der Handler-Funktion den Verweis auf das Elementobjekt übergeben. Darauf kannst du ja im Code des Attributs über this zugreifen.

<p onmouseover="show(this)">test</p>

Die Funktion nimmt dann als ersten Parameter das p-Elementobjekt an.

function show (element) {
   element.innerHTML = "...";
}

So gelingt der Zugriff.

Mathias

[Jean Pascal]

Hallo Mathias,

danke für die ausführliche Erläuterung. Ich habe mir den Text mal durchgelesen, aber ich habe das Gefühl, ich muss etwas weiter vorne anfangen...

Ich habe es zwar mal versucht, wie du sagtest (ohne es richtig zu verstehen), aber das ging wie folgt leider auch nicht:

<p onMouseOver="show(this)" onMouseOut="hide(this)">test</p>

extern:
function show (p) {p.this.innerHTML = 'test2';}
function hide (p) {p.this.innerHTML = 'test';}

Naja, jetzt arbeite ich mit Struppis Lösung, denn dieser Ansatz war ja ohnehin von hinten durch die Brust ins Auge. Trotzdem schade.

Danke nochmals. Jean

[Struppi]

Ich habe es zwar mal versucht, wie du sagtest (ohne es richtig zu verstehen), aber das ging wie folgt leider auch nicht:

Du warst aber auf den richtigen weg.

<p onMouseOver="show(this)" onMouseOut="hide(this)">test</p>

extern:
function show (p) {p.this.innerHTML = 'test2';}
function hide (p) {p.this.innerHTML = 'test';}

this ist das Objekt und dann übergibst du dies als Parameter mit dem Namen p, d.h. in der Funktion ist p = this im HTML Tag, folglich brauchst du in der Funktion nur p.innerHTML

Struppi.

[Jean Pascal]

Genial. Jetzt funktioniert Beides :-).

[Struppi]

ich habe hier etwas Code, den ich gerne in einer externen js-Datei auslagern möchte:

<p onMouseOver="this.innerHTML = 'test2'" onMouseOut="this.innerHTML = 'test'">test</p>

Da die Zeichenketten test und test2 am Ende etwas länger werden, würde ich sie also gerne als Funktionen hereinladen. In etwa so:

<p class="menu" onMouseOver="show()" onMouseOut="hide()">test</p>

extern:
function show () {this.innerHTML = 'test2';}
function hide () {this.innerHTML = 'test';}

Warum deklarierst du nicht einfach eine Textvariabel?

var text = [ 'test2', 'test'];

<p class="menu" onMouseOver="innerHTML = text[0]"
onMouseOut="innerHTML = text[1]">test</p>

Struppi.

[Jean Pascal]

Hallo Struppi,

da hatte ich auch schon drüber nachgedacht, vorallem, weil ich die anderen Erlärungen einfach noch nicht verstehe (liegt eben an meinem Kenntnisstand).

Aber selbst wenn ich exakt deinen Code verwende, will es nicht funktionieren.

Gruß Jean

[Jean Pascal]

Mein Fehler!

Es funktioniert doch, wie du gesagt hast.

Vielen Dank. Jean