this.innerHTML in externer Datei

[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