Problem mit "onclick" bei DOM erweiterung

Herzlich willkommen in der Welt von JavaScript

Dein erstes Problem mit dem required Attribut ist kein wirkliches Problem, das Attribut wird gesetzt, jedoch nicht ausgefüllt, mit HTML5 ist das ausfüllen auch nicht nötig (wie das vorher war weiß ich derzeit nicht):

<!-- Quelle: w3schools -->
<input type="text" name="usrname" required>

Jedoch einfahc um es zu erwähnen: Du könntest nachdem du mit appendChild die Elemente angehängt hast einfach setAttribute nutzen:

document.getElementById(legungName).setAttribute("required", "required");

Dein 2. Problem ist etwas komplexer aber mit einem einfachen Trick auch gelöst. Event-Listener an nachträglich erstellte DOM Elemente anhängen geht nicht einfach über das Einfügen in den HTML Code. Auch hier warten wir bis das Element mit appendChild angehängt wurde und nutzen dann die Funktion addEventListener:

document.getElementById(legungName).addEventListener("focus", function() { 
  updateLegung(m);
});

Der eigentliche Aufbau wäre:

element.addEventListener(TYPE, LISTENER [, useCapture, wantsUntrusted]);

Wenn wir jedoch Werte an eine Funktion übergeben wollen müssen wir dies in einer anonymen Funktion tun, ansonsten wird der LISTENER ausgeführt sobald addEventListener ausgeführt wird.

// Wir erhalten sofort eine Alert Box mit dem Inhalt 1
element.addEventListener("click", alert(1));

Der Aufbau einer anonymen Funktion ist immer:

function() {
  // Code
}

Ich hoffe deine Fragen sind beantwortet, ansonsten melde dich gerne wieder

Ich habe an deinen Code von oben das Gleiche angehängt wie du:

//Jetzt werden noch zusaetzliche Attribute gesetzt. 
document.getElementById(legungName).setAttribute("required", "required"); 
document.getElementById(lengthName).setAttribute("required", "required"); 
document.getElementById(stueckzahlName).setAttribute("required", "required"); 
document.getElementById(legebarrenName).setAttribute("required", "required"); 




//Jetzt wird noch der Eventlistener angehaengt. 
document.getElementById(legungName).addEventListener("focus", function(){ 
//updateLegung(m); 
});

Und bei mir sieht das im Firefox so aus:
html-seminar.de/woltlab/attachment/608/

onFocus kann nicht angezeigt werden, wir haben das Attribut nicht hinzugefügt, JavaScript überwacht das Event jetzt persönlich

Zitat von Basiii

Und bei mir sieht das im Firefox so aus:
html-seminar.de/woltlab/attachment/608/

onFocus kann nicht angezeigt werden, wir haben das Attribut nicht hinzugefügt, JavaScript überwacht das Event jetzt persönlich

Jetzt klappt es auch bei mir mit dem required, hatte einen logischen Fehler in dem ich bei der ID vergabe der Eingabefelder, zwei mal die Nummer 1 vergeben hab^^

Verstehe ich das jetzt richtig, dass bei:

document.getElementById(legungName).addEventListener("focus", function(){ 
//updateLegung(m); 
} 
);

er diesem Textfeld das onFocus Event überwacht, und falls dies aktiviert wird, dann die Funktion updateLegung(m) ausführt?
(wobei in diesem fall m ja eine Variable ist, oder ist dass dann nicht möglich?)

Korrekt, diese Methode macht genau das Gleiche wie onFocus, jedoch ohne in den HTML Stammbaum eingreifen zu müssen. Du kannst in der anonymen Funktion ganz normal JavaScript ausführen, also auch Variablen an die Funktion übergeben.

Vielen Dank für deine Hilfe. Jetzt klappt es, aber ich musste noch etwas verändern, da nämlich:

document.getElementById(legungName).addEventListener("focus", function(){ 
//updateLegung(m); 
} 
);

bei mir nicht funktioniert hat. Aber wenn ich die Kommentierung entferne,

document.getElementById(legungName).addEventListener("focus", function(){ 
updateLegung(m); 
} 
);

klappt es wie es soll.

Das ein Kommentar nicht ausgeführt wird macht Sinn Aber schön das es jetzt funktioniert.

DOM Manipulation ist mit jQuery übrigens um ein Vielfaches einfacher.

Zitat von Basiii

OM Manipulation ist mit jQuery übrigens um ein Vielfaches einfacher.

Kann ich mir vorstellen. Aber ich fand als Einsteiger es einfacher mit Javascript, da ich dort es einfacher finde, die Logik zu verstehen. Bei jQuery ist mir das meist zu stark abgekürzt.

Wieso eigentlich nicht mit innerHTML arbeiten? Ich habe das nur kurz überflogen aber ja..

EDIT:
Ja ich muss da Basiii unter mir Recht geben

Du hast auf jeden Fall den richtigen Ansatz zum lernen, weiter so