Problem mit Prüfung von dynamisch erzeugten Elementen unter

[avo]

Hallo

Vielleicht kann mir hier einer bei einem Javascript Problem im IE helfen.

Ich habe im HMTL Code zwei leere Div mit den IDs spec1 und spec2. Über einen Link mit der Anweisung javascript:addSpec(1) können im Div spec1 Textfelder erzeugt werden.
Über einen weiteren Link javascript:copySpec(2) sollen die Textfelder aus spec1 in das Div spec2 kopiert werden falls die Felder noch nicht vorhanden sind. Das funktoniert auch soweit. Wenn der Link mit javascript:copySpec(2) ein weiteres Mal angeklickt wird soll überprüft werden ob das jeweilige Feld schon existiert und nicht nochmal kopiert werden. Klappt in allen Browsern eigentlich wunderbar nur der IE macht Probleme. Während andere Browser (Firefox + Opera) wie erwartet die Felder kein zweites Mal kopieren, kann ich mit dem IE immer weiter munter Felder anhängen.

Ob ein Element existiert versuche ich mit getElementsByName herauszufinden aber genaue hier hat der IE anscheinend Probleme. Hat jemadn eine Idee wie ich mein Script verbessern kann damit mein Vorhaben auch im IE funktioniert?

Hier noch das vereinfachte Javascript:

Code: Alles auswählen

      <script type=\"text/javascript\">
         var i = 0;

         function addSpec(lang)
         {
            var newElem = document.createElement('div');

          var newInput = document.createElement('input');
          newInput.type = 'text';
          newInput.name = 'spec[' + lang + '][' + i + '][name]';
          newInput.size = '30';
          newInput.maxlength = '50';

          newElem.appendChild(newInput);

          document.getElementById('spec' + lang).appendChild(newElem);

          i++;
        }

        function copySpec(lang)
        {
           var elem = '';
           var elements = document.getElementById('spec1').getElementsByTagName('input');
           for (j = 0; j < elements.length; j++)
           {
              if (elements[j].type == 'text')
              {
                 elem = document.getElementsByName('spec[' + lang + '][' + j + '][name]')[0];
                 if (elem)
                 {
                    document.write('element gefunden');
                 }
                 else
                 {
                   var newElem = document.createElement('div');

                var newInput = document.createElement('input');
                newInput.type = 'text';
                newInput.name = 'spec[' + lang + '][' + j + '][name]';
                newInput.size = elements[j].size;
                newInput.maxlength = elements[j].maxlength;
                newInput.value = elements[j].value;

                newElem.appendChild(newInput);

                document.getElementById('spec' + lang).appendChild(newElem);
              }
              }
           }
        }
      </script>

[avo]

Hallo

Ich habe das Problem inzwischen slebst lösen können. Ich lese jetzt einfach alle vorhandenen Input-Felder im Div spec2 mit document.getElementById('spec' + lang).getElementsByTagName('input'); aus und frage dann mit if (typeof elements2[j] != 'undefined') ob das Feld deinfiert ist.
Nachdem ich das Problme gelöst habe kann ich nun weiter basteln.

Der Code sieht jetzt so aus:

Code: Alles auswählen

<script type=\"text/javascript\">
         var i = 0;

         function addSpec(lang)
         {
            var newElem = document.createElement('div');

          var newInput = document.createElement('input');
          newInput.type = 'text';
          newInput.name = 'spec[' + lang + '][' + i + '][name]';
          newInput.size = '30';
          newInput.maxlength = '50';

          newElem.appendChild(newInput);

          document.getElementById('spec' + lang).appendChild(newElem);

          i++;
        }

        function copySpec(lang)
        {
           var elements = document.getElementById('spec1').getElementsByTagName('input');
           var elements2 = document.getElementById('spec' + lang).getElementsByTagName('input');
           
           for (j = 0; j < elements.length; j++)
           {
              if (elements[j].type == 'text')
              {
                 if (typeof elements2[j] != 'undefined')
                 {
                        elements2[j].value = elements[j].value;
                 }
                 else
                 {
                   var newElem = document.createElement('div');

                var newInput = document.createElement('input');
                newInput.type = 'text';
                newInput.name = 'spec[' + lang + '][' + j + '][name]';
                newInput.size = elements[j].size;
                newInput.maxlength = elements[j].maxlength;
                newInput.value = elements[j].value;

                newElem.appendChild(newInput);

                document.getElementById('spec' + lang).appendChild(newElem);
              }
              }
           }
        }
      </script>

[Manuel]

Hi Avo!

Da warst du wohl etwas zu flott für unsere Javascript-Experten *g* Aber selbst lösen ist meistens eh am besten, da der Lerneffekt am größten ist.

Lg,
Manuel