Ein Problem mit Javascript

[Don P]

Hallo,

function functiondialog(f) {

if(typeof f === 'function') {

var htmlString = '<input type="text"></input>';
   document.body.innerHTML = htmlString;
}
}

>   
> Damit ist das Eingabefeld im Dokument verfügbar, und man kann sogar etwas eingeben.  
  
Dieses Vorgehen hat u.a. den Nachteil, dass man das Eingabefeld nach dem Erzeugen nicht mehr einfach ansprechen kann. Es liegt jetzt halt im DOM-Baum und man müsste es mit DOM-Methoden erst wieder dort raussuchen, um z.B. noch eine Eventhandlerfunktion für <http://de.selfhtml.org/javascript/sprache/eventhandler.htm#onchange@title=onchange> dranhängen zu können.  
  
Daher empfiehlt es sich hier, das Eingabeelement mit <http://de.selfhtml.org/javascript/objekte/document.htm#create_element@title=createElement> zu erzeugen, und ihm erst alles nötige Verhalten beizubringen, bevor man es schließlich im DOM-Baum verankert:  
  
~~~javascript
function functiondialog(f) {  
  
  if(typeof f === 'function') {  
  
    // Eingabeelement erzeugen:  
    var inputElement = document.createElement('input');  
    inputElement.type = 'text';  
  
    // Eventhandlerfunktion bauen und gleich zuweisen:  
    inputElement.onchange = function() {  
  
       // Ergebnis-Div finden:  
       var outputElement = document.getElementById('Ergebnis');  
       // Ergebnis berechnen und im Ergbenis-Div anzeigen:  
       outputElement.innerHTML = f(this.value);  
    }  
  
    // fertiges Eingabefeld im DOM-Baum einsetzen:  
    document.body.appendChild(inputElement);  
  }  
}  

(ungetestet)

Dazu muss man wissen, dass innerhalb einer Eventhandlerfunktion die Variable this auf das DOM-Element verweist, das den Event ausgelöst hat, in unserem Fall also genau auf das Eigabeelement, so dass man leicht auf den eingegebenen Wert zugreifen kann, ohne das Eingabefeld erst wieder mit getElementById oder so aus dem DOM-Baum klauben zu müssen.

Gruß, Don P