mit "getElementByTagName" Textabsatz ändern

[lousypoetry]

Hallo zusammen!

ich hab mal ne Frage: ich möchte, dass sich der Text eines Textabsatzes beim Draufklicken ändert. Ich hab schon ein bisschen probiert, aber irgendwie komm ich zu keinem brauchbaren Ergebnis. Dann dachte ich, es könnte mit "getElementByTagName" gehen und hab folgendes Script geschrieben(leicht abgekuerzt)

function aendern
{
      document.getElementByTagName("p")[0].firstChild.data = "neuer Text";
}

--
<p><a href ="javascript:aendern();">ein Text</p>

leider scheint da ein Fehler drin zu sein, kann mir jemand helfen? Danke!

[Thomas Meinike]

Hallo,

function aendern
{
      document.getElementByTagName("p")[0].firstChild.data = "neuer Text";
}

Die Methode heißt getElementsByTagName(), bezieht sich also auf die prinzipielle Ansprache mehrerer Elemente, deshalb "Elements". Gibt es nur ein Element, dann liefert die Methode auch nur ein Member im Ergebnis-Objektarray.

MfG, Thomas

[molily]

Hallo,

function aendern
{
      document.getElementByTagName("p")[0].firstChild.data = "neuer Text";
}

Die Methode heißt getElementsByTagName(), bezieht sich also auf die prinzipielle Ansprache mehrerer Elemente, deshalb "Elements". Gibt es nur ein Element, dann liefert die Methode auch nur ein Member im Ergebnis-Objektarray.

Dann bietet sich wohl getElementById (http://selfhtml.teamone.de/javascript/objekte/document.htm#get_element_by_id) an:

function aendern () {
 document.getElementById('meinabsatz').firstChild.data = 'neuer Text';
}

<p id="meinabsatz" onclick="aendern()">klick mich</p>

Wenn mit einem Link gearbeitet wird, wäre es komplizierter:

<p id="meinabsatz"><a href="javascript:aendern()">klick mich</a></p>

Der erste Kindknoten des p-Elements ist dann nämlich kein Textknoten mehr, sondern ein Elementknoten (a-Element). Der kann nicht über data geändert werden, weil data nur für Textknoten gilt. Somit müsste man den kompletten a-Knoten mitsamt dem Kindknoten »klick mich« durch den neuen Text ersetzen. Das ginge über http://selfhtml.teamone.de/javascript/objekte/node.htm#replace_child:

var textknoten = document.createTextNode('neuer Text');
 document.getElementById('meinabsatz').replaceChild(textknoten, document.getElementById('meinabsatz').firstChild);

Aber es bietet sich der Einfachheit halber innerHTML (http://selfhtml.teamone.de/javascript/objekte/all.htm#inner_html) an:

document.getElementById('meinabsatz').innerHTML = 'neuer Text';

Das ist zwar nicht DOM-standardisiert, wird aber mittlerweile relativ breit unterstützt. (Näherliegend wäre innerText, das kann Mozilla aber nicht.)

Die leeren Klammern () nach function aendern sind übrigens notwendig, selbst wenn die Funktion keine Parameter entgegennimmt (von Möglichkeiten wie »arguments« einmal abgesehen).

Mathias

[Thomas Meinike]

Hallo,

Dann bietet sich wohl getElementById (http://selfhtml.teamone.de/javascript/objekte/document.htm#get_element_by_id) an:

Klar, es fuehren viele Wege in den DOM ;-).

Die leeren Klammern () nach function aendern sind übrigens notwendig, selbst wenn die Funktion keine Parameter entgegennimmt (von Möglichkeiten wie »arguments« einmal abgesehen).

Den fehlenden Call-Operator hatte ich im OP uebersehen.

MfG, Thomas