Objekte und this

Wichtig

An dieser Stelle möchte ich auf das Wort this eingehen, da wir im weiteren Verlauf immer wieder darauf stoßen werden.

this bezieht sich immer auf das jeweilige Objekt:

Beispiel

Ich möchte, dass beim Klick auf diesen Button seine id übergeben wird - in diesem Fall button_1.

<button id="button_1" onclick="myFunction(this.id);">

In diesem Beispiel bezieht sich das Wort this auf genau diesen Button.
Der Button besitzt eine Eigenschaft: seine ID.
this.id liefert daher die ID dieses Buttons.

Ausgabe: button_1

Das bedeutet für den weiteren Verlauf: Jedes Objekt hat Eigenschaften oder Methoden.
Diese können über das Wort this definiert oder angesprochen werden.

Der Punkt this.id ist ein sogenannter Punktoperator, und er dient als Bindeglied z.B. zwischen einem Objekt und seiner Methode oder Eigenschaft, z.B.: document.write().

Doch sehen wir uns das Beispiel genauer an.

Kopiert Euch gerne den Code und probiert es aus: Code

Beispiel

Ausgabe:

Code


HTML:

Ausgabe:
<div id="target"></div>
<br>
<button class="ancor_button" id="button_1" 
onclick="getThisId(this.id)">Gib meien ID</button>



CSS:




JavaScript:

function getThisId(id){
	// Nur wenn das Element vorhanden ist
	if( document.querySelector('#target') ){
		document.querySelector('#target').innerText = id;
	}
}