Ein Problem mit Javascript

[molily]

Das sieht doch schon sehr gut für den Anfang aus.

function functiondialog(f){

<!-- hier müsste ich ja noch überprüfen ob f auch eine funktion ist. -->

Das geht so:
if (typeof f == 'function') { ... }

siehe
http://de.selfhtml.org/javascript/sprache/operatoren.htm#typeof
http://aktuell.de.selfhtml.org/artikel/javascript/objektabfragen/#typeof

document.getElementById("input").write("<form><input type="text" name="eingabe"><input type="button" name="Los" onclick="quadrat(this.form.eingabe.value)"></form>");

Das ist schon richtig gedacht, allerdings gibt es keine write-Methode auf normalen Elementen.
Was du suchst ist die http://de.selfhtml.org/javascript/objekte/all.htm#inner_html@title=innerHTML-Eigenschaft.

Ferner musst du aufpassen, wenn du HTML-Code in JavaScript-Strings unterbringst. Mit "..." oder '...' begrenzt du JavaScript-Strings. Diese Begrenzer kannst du nicht gleichzeitig im String als HTML-Attribut-Begrenzer verwenden - denn damit schließt du den JS-String ja.

Du musst also entweder " als String-Begrenzer und ' als Attribut-Begrenzer verwenden
"<input type='text'>"
oder umgekehrt:
'<input type="text">'

Wenn du
onclick="quadrat(this.form.eingabe.value)"
schreibst, so wird nicht die Funktion verwendet, die du an functiondialog übergeben hast, sondern immer quadrat. Das ist im Beispiel egal, aber die Aufgabenstellung erfordert ja, dass die Funktion variabel ist.

Außerdem ruft dieser Code nur quadrat auf. Du willst das Ergebnis aber noch ausgeben, indem du es in das output-Element schreibst.

Mit innerHTML alleine kannst du das Problem nicht lösen. Um die übergebene Funktion auszuführen, müsstest du schon einen Event-Handler per JavaScript registrieren. Als Handler erzeugst du eine verschachtelte Funktion. Darin hast du Zugriff auf die übergebene Funktion f und kannst sie aufrufen:

function functiondialog (f){  
  
  // Erzeuge Formular  
  // Der Button hat eine ID bekommen, zum einfachen Ansprechen mit getElementById  
  document.getElementById("input").innerHTML = '<form><input type="text" name="eingabe"><input type="button" id="berechne" value="Los"></form>';  
  
  // Erzeuge Event-Handler-Funktion  
  function handler () {  
    // Lese Eingabe in Variable  
    var eingabe = this.form.eingabe.value;  
    // Rufe f auf, übergebe die Eingabe  
    var ergebnis = f(eingabe);  
    // Gebe das Ergebnis im output-Element aus  
    document.getElementById('output').innerHTML = ergebnis;  
  }  
  
  // Registriere Event-Handler am Button  
  document.getElementById('berechne').onclick = handler;  
}

(ungetestet - soll nur das Konzept veranschaulichen)

function quadrat(x){
ergebnis = x * x;

Dies sollte eine <http://de.selfhtml.org/javascript/sprache/variablen.htm@title=lokale Variable> sein, also nicht das »var« davor vergessen.

return ergebnis;
}

<script type="text/javascript">
functiondialog();
</script>

Hier vergisst du die Funktion quadrat zu übergeben.

Mathias