Anfängerfrage: Verweis auf DOM-Objekt speichern

[molily]

var button = '<input type="button" onclick="meinObjekt.setzeWert(this);" value="Wert setzen">';
          document.getElementsByTagName("P")[0].innerHTML += button;

Wenn du innerHTML += '...' schreibst, wird innerHTML ausgelesen, indem das DOM serialisiert wird. Dann wird dem zurückgegebenen String ein weiterer String angehängt und innerHTML zugewiesen. Dabei wird der String wieder geparst, es werden neue DOM-Knoten erzeugt und der Elementinhalt wird durch diese Knoten ersetzt.

Wenn du jetzt vorher einen Verweis auf ein Kindelement hattest, so führt er nun ins Leere, weil das Element durch ein neues (wenn auch gleiches) ersetzt wurde. Sämtliche daran gespeicherte Informationen wie mit JavaScript registrierte Event-Handler gehen auch verloren.

Das will man eigentlich so gut wie nie, daher ist innerHTML += weitgehend untauglich. Besser ist, du verwendest die DOM-Methoden wie http://de.selfhtml.org/javascript/objekte/node.htm#append_child@title=appendChild oder, wenn du unbedingt mit Strings arbeiten willst, insertAdjacentHTML('beforeEnd', 'HTML-Code').

Im Sinne der Trennung von HTML und JavaScript sollte man ohnehin mit Event-Handling ohne eingebettetes JavaScript arbeiten. Dazu ist createElement/appendChild nützlicher.

var button = document.createElement('input');  
button.type = 'button';  
button.value = 'Wert setzen';  
button.onclick = meinObjekt.setzeWert;  
document.getElementsByTagName("P")[0].appendChild(button);

In setzeWert kannst du mit this auf den Button (das Zielelement) zugreifen. Als ersten Parameter bekommt die Handler-Funktion dann das Event-Objekt.

setzeWert : function (event) {  
   meinObjekt.zielInput.value = "Skriptwert";  
   this.parentNode.removeChild(this);  
}

So ähnlich kannst du natürlich auch beim Registrieren der Event-Handler für die <input type="text"> vorgehen.

Mathias