Problem Javascript

[NightsOfVarmint]

Hallo liebe Community,

Ich habe mal wieder ein Problem mit Javascript.

Ich soll 8 Zeichen eingeben, Soweit funktioniert es, dann die Schriftgröße auswählen, klappt auch soweit, und dann wenn ich auf den Knopf klicke, wird der Text vertikal angezeigt (das soll so sein), aber nicht in der Schriftgröße, die ich möchte.

 Spoiler

<!DOCTYPE html>
<html>
  <head>
    <meta charset="ISO-8859">
    <title>A1MorhengStephen</title>
    <link type="text/css" rel="stylesheet" href="Layout.css">
    <script language="Javascript">
      var ErsterAufruf = true;
      
      function Formatieren()
      {
        if (ErsterAufruf == true) 
        {
          // Eingabetext auslesen
          Eingabe = document.forms["fFormate"].elements["Eingabe"].value;
          
          
          var EingabeText = Eingabe;
          
          // Eingabetext in das aktuelle HTML Dokument einbetten und formatieren
          // ACHTUNG: Das ganze DIV Element in einer Zeile definieren, sonst funktionieren
          // die folgenden Attributzuweisungen nicht. Keine Ahnung wieso das so ist!!!
          var j = 0;  
          for (var i = 0; i <= 7; i++)
          {
            document.body.innerHTML = document.body.innerHTML + "<div id = 'Neu'>" + EingabeText.substr(j, (((EingabeText.length + j) - (EingabeText.length + i - 1)))) + "</div>"
            j++;
          }
        }
        
        // Schriftgrösse
        if (document.forms["fFormate"].elements["TextSize"] [0].checked)
        {
          TextSize = 50;
        }
        else if (document.forms["fFormate"].elements["TextSize"] [1].checked)
              {
                TextSize = 100;
              }
              else if (document.forms["fFormate"].elements["TextSize"] [2].checked)
                    {
                      TextSize = 200;
                    }
        document.all.Neu.style.fontSize = TextSize;
        
        ErsterAufruf = false;
      }
    </script>
  </head>
  <body>
    <form name="fFormate">
      Geben Sie einen Text ein (max 8 Zeichen):
      <input name="Eingabe" type="text" size="8" maxlength="8">
      Schriftgrösse:
      
      <input type="radio" name="TextSize" value="0" checked>50
      <input type="radio" name="TextSize" value="1">100
      <input type="radio" name="TextSize" value="2">200
      
      <input type="button" value="Formatieren" onclick="Formatieren()">
      <hr>
    </form>
  </body>
</html>

Zur Fehlermeldung kann ich nur den Kopfschütteln.

Line: 44
Char: 9
Error: Unable to set property 'fontSize' of undefined or null reference
Code: 0

Doch dort ist nur die Zeile

document.all.Neu.style.fontSize = TextSize;

Ich habe auch schon herum experimentiert und herausgefunden, dass es irgendwie an der ID liegt. Es kann aber auch an der Schleife liegen, da dort der <div id=Neu> wiederholt wird, nur ich habe es bisher nicht geschaft die <div id=Neu> rauszunehmen und außerhalb der Schleife einzufügen, damit die id nur einmal vorhanden ist.

Würde mich freuen, wenn bald eine Lösung in Aussicht ist.

Mfg Varmint

[kissein]

 Spoiler

PHP Code:

<!DOCTYPE html>
<html>
  <head>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
      <title>A1MorhengStephen</title>
     <link type="text/css" rel="stylesheet" href="Layout.css"> 
    <script type="text/javascript">
        var ErsterAufruf = true;

        function Formatieren(){
            if (ErsterAufruf === true){
                // Eingabetext auslesen
                Eingabe = document.forms["fFormate"].elements["Eingabe"].value;


                var EingabeText = Eingabe;

                // Eingabetext in das aktuelle HTML Dokument einbetten und formatieren
                // ACHTUNG: Das ganze DIV Element in einer Zeile definieren, sonst funktionieren
                // die folgenden Attributzuweisungen nicht. Keine Ahnung wieso das so ist!!!
                var j = 0;  
                for (var i = 0; i <= 7; i++){
                    document.body.innerHTML = document.body.innerHTML + "<div class = 'Neu'>" + EingabeText.substr(j, (((EingabeText.length + j) - (EingabeText.length + i - 1)))) + "</div>"
                    j++;
                }
            }

            // Schriftgrösse
            if (document.forms["fFormate"].elements["TextSize"] [0].checked){
                TextSize = 50;
            }
            else if (document.forms["fFormate"].elements["TextSize"] [1].checked){
                TextSize = 100;
            }
            else if (document.forms["fFormate"].elements["TextSize"] [2].checked){
                TextSize = 200;
            }

            var nodes = document.getElementsByClassName("Neu");
            
            for(var i = 0; i < nodes.length; i++){
                nodes[i].setAttribute("style", "font-size:" + TextSize + 'px', false);
            }
            ErsterAufruf = false;
        }
        
    </script>
  </head>
  <body>
    <form name="fFormate">
      Geben Sie einen Text ein (max 8 Zeichen):
      <input name="Eingabe" type="text" size="8" maxlength="8">
      Schriftgrösse:
      
      <input type="radio" name="TextSize" value="0" checked>50
      <input type="radio" name="TextSize" value="1">100
      <input type="radio" name="TextSize" value="2">200
      
      <input type="button" value="Formatieren" onClick="Formatieren();">
      <hr>
    </form>
  </body>
</html> 


Bei mehreren Layern, class anstatt id verwenden. Attribute können zugegriffen werden sofern sie vorhanden sind, ansonsten muss das Attribute erst gesetzt werden.

Ansonsten paar kleinere Syntaxfehler korrigiert was ich gesehen hab.