ziegenmelker: Opera Fehler beim Anlegen von Input Elementen via JavaScript

Hallo,

ich bin da auf einen merkwürdigen Fehler im Opera Browser(V.7.54) gestossen. Ich erzeuge im folgenden Beispiel mehrere Elemente mit JavaScript Methoden. Beim Füllen von zwei (oder auch mehreren) Input-Elementen mit dem Inhalt von JavaScript-Variablen wird nur das letzte Element korrekt gefüllt.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
<html>  
<head>  
<title>Spirale</title>  
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />  
  
<script type="text/javascript">
var xsize = 15;  
var ysize = 20;  
  
function createInput() {  
  div = document.createElement('div');  
  div.innerHTML = "Dimensionen der Matrix";  
  p = document.createElement('p');  
  inp1 = document.createElement('input');  
  inp1.setAttribute('id','x');  
  inp1.setAttribute('value',xsize);  
  p.innerHTML = "X: ";  
  p.appendChild(inp1);  
  inp2 = document.createElement('input');  
  inp2.setAttribute('id','y');  
  inp2.setAttribute('value',ysize);  
  p.innerHTML += "Y: ";  
  p.appendChild(inp2);  
  div.appendChild(p);  
  button = document.createElement('button');  
  button.setAttribute('type','button');  
  button.innerHTML = "Dimensionen &auml;ndern";  
  button.setAttribute('onclick','');  
  div.appendChild(button);  
  document.body.appendChild(div);  
}
</script>  
</head>  
<body onload="createInput();">  
</body>  
</html>

Hat irgend jemand eine Vorstellung an was das liegen kann?
IE6 und die Gecko-Browser machen es so, wie ich es erwarte.

cu,
ziegenmelker

  1. Hallo,

    Hat irgend jemand eine Vorstellung an was das liegen kann?

    Ersetze p.innerHTML = "X: "; durch
      p.appendChild(document.createTextNode("X: "));

    und p.innerHTML += "Y: "; durch
      p.appendChild(document.createTextNode("Y: "));

    und auch Opera 7.54 spielt mit.

    MfG, Thomas

    1. Hallo Thomas,

      Hat irgend jemand eine Vorstellung an was das liegen kann?

      Ersetze [...]

      und auch Opera 7.54 spielt mit.

      erstmal danke für deine Antwort.
      Ein Workaround in der von dir angegebenen Form oder auch das nachträgliche Setzen des values über:
      document.getElementById('x').value = xsize;
      war mir schon bekannt, mich hat es eher interessiert warum dieser Fehler in dieser Konstellation von Befehlen auftritt.
      Ich habe noch etwas nachgeforscht und bin zu dem Ergebnis gekommen, daß Opera
      p.innerHTML += "Y: ";
      nicht korrekt auführt, wobei es an dem "+=" zu liegen scheint. Dieser Code überschreibt ofenbar das value-Attibut. So reicht es also auch, dieses Codesegment durch
      p.appendChild(document.createTextNode("Y: "));
      zu ersetzen. Dann funktionert alles wie gewünscht.

      cu,
      ziegenmelker

      1. Hallo,

        Ich habe noch etwas nachgeforscht und bin zu dem Ergebnis gekommen, daß Opera
        p.innerHTML += "Y: ";
        nicht korrekt auführt, wobei es an dem "+=" zu liegen scheint. Dieser Code überschreibt ofenbar das value-Attibut. So reicht es also auch, dieses Codesegment durch
        p.appendChild(document.createTextNode("Y: "));
        zu ersetzen. Dann funktionert alles wie gewünscht.

        Es ging doch gar nicht um die "+="-Zeile, sondern um das erste Ansprechen von innerHTML beim neu erzeugten p-Elementknoten mit Wert "X: ". Offenbar ist bei aelteren Operas die innerHTML-Eigenschaft zu diesem Zeitpunkt noch nicht etabliert, was ich bei einem Elementknoten ohne Inhalt sogar nachvollziehbar finde (und letzlich mangels offiziellem Standard dem Browser ueberlassen bleibt).

        Auf innerHTML wuerde ich mich auch nur ungern verlassen, zumal ja DOM-Techniken zum Einsatz kommen.

        MfG, Thomas

        1. Hallo,

          Es ging doch gar nicht um die "+="-Zeile, sondern um das erste Ansprechen von innerHTML beim neu erzeugten p-Elementknoten mit Wert "X: ". Offenbar ist bei aelteren Operas die innerHTML-Eigenschaft zu diesem Zeitpunkt noch nicht etabliert, was ich bei einem Elementknoten ohne Inhalt sogar nachvollziehbar finde (und letzlich mangels offiziellem Standard dem Browser ueberlassen bleibt).

          nein. Das Problem hat imho nichts mit innerHTML zu tun, denn damit kann diese Opera-Version offenbar umgehen, wie die Benutzung in der eigentlich erheblich umfangreicheren Seite gezeigt hat. Folgendes Beispiel könnte eher die Problematik verursachen, denn es beweist, daß der Opera gar kein value-Attribut anlegt!

          <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
          <html>  
          <head>  
          <title>Opera Test</title>  
          <meta http-equiv="content-type" content="text/html; charset=UTF-8" />  
            
          <script type="text/javascript">
          
          function createInput() {  
            inp1 = document.createElement('input');  
            inp1.setAttribute('id','x');  
            inp1.setAttribute('value','15');  
            inp1.setAttribute('name','xsize');  
            for(i=0;i<inp1.attributes.length;i++) { // kein Attribut mit Namen 'value' im Opera!  
              alert(inp1.attributes[i].nodeName + ": " + inp1.attributes[i].nodeValue);  
            }  
          }
          
          </script>  
          </head>  
          <body onload="createInput();">  
          </body>  
          </html>
          

          Wenn man ein solches Input-Element in das DOM einhängt kann man aber sehr wohl über die id auf das Element und den 'value' zugreifen, nicht jedoch über die Attributes Collection.

          Auf innerHTML wuerde ich mich auch nur ungern verlassen, zumal ja DOM-Techniken zum Einsatz kommen.

          Ack.

          cu,
          ziegenmelker

          1. Hallo,

            nein. Das Problem hat imho nichts mit innerHTML zu tun, denn damit kann diese Opera-Version offenbar umgehen, wie die Benutzung in der eigentlich erheblich umfangreicheren Seite gezeigt hat.

            Das gepostete Beispiel hat bei mir unter Opera 7.54 nach der innerHTML-Aenderung problemlos funktioniert.

            Folgendes Beispiel könnte eher die Problematik verursachen, denn es beweist, daß der Opera gar kein value-Attribut anlegt!

            function createInput() {

            inp1 = document.createElement('input');
              inp1.setAttribute('id','x');
              inp1.setAttribute('value','15');
              inp1.setAttribute('name','xsize');
              for(i=0;i<inp1.attributes.length;i++) { // kein Attribut mit Namen 'value' im Opera!
                alert(inp1.attributes[i].nodeName + ": " + inp1.attributes[i].nodeValue);
              }
            }

              
            Kann ich nicht nachvollziehen, mit Opera 7.54 und 8.0 erhalte ich nach der Attributzuweisung den Wert 15:  
              
            `alert(inp1.getAttribute("value"));`{:.language-javascript}  
              
            MfG, Thomas  
            
            
            1. Hallo,

              nein. Das Problem hat imho nichts mit innerHTML zu tun, denn damit kann diese Opera-Version offenbar umgehen, wie die Benutzung in der eigentlich erheblich umfangreicheren Seite gezeigt hat.

              Das gepostete Beispiel hat bei mir unter Opera 7.54 nach der innerHTML-Aenderung problemlos funktioniert.

              bei mir auch, aber wie ich schon schrieb, mir geht es um die Ursachen. Mag sein, daß das rein akademisch zu bewerten ist, könnte aber doch Andere möglicherweise auf Fehler aufmerksam machen.

              Folgendes Beispiel könnte eher die Problematik verursachen, denn es beweist, daß der Opera gar kein value-Attribut anlegt!

              function createInput() {

              inp1 = document.createElement('input');
                inp1.setAttribute('id','x');
                inp1.setAttribute('value','15');
                inp1.setAttribute('name','xsize');
                for(i=0;i<inp1.attributes.length;i++) { // kein Attribut mit Namen 'value' im Opera!
                  alert(inp1.attributes[i].nodeName + ": " + inp1.attributes[i].nodeValue);
                }
              }

              
              >   
              > Kann ich nicht nachvollziehen, mit Opera 7.54 und 8.0 erhalte ich nach der Attributzuweisung den Wert 15:  
              >   
              > `alert(inp1.getAttribute("value"));`{:.language-javascript}  
                
              Das ist ja schön, aber warum nicht bei der Iteration durch die Attibutes Collection?  
              Diese ist ja gerade dazu da, auf Attribute zugreifen zu können, die auch existieren, sprich denen Werte zugewiesen wurde. Ich möchte gegebenenfalls nicht duch alle Attribute mit 'getAttribute(String)' durchprobieren.  
              Und da scheint mir auch der Zusammenhang zum innerHTML zu sein. Alle anderen Browser zeigen das Value-Attribut im Input-Element an, nur der Opera nicht.  
              Es wird jedoch wohl angezeigt, wenn ein Input-Element im HTML-Code der Seite steht.  
              Ebenso kann man bei einem solchen statischen Element wie zu erwarten durch die Attributes-Collection iterieren.  
              Und ich bin der Meinung daß das ein \_Fehler\_ ist, auch wenn es, mehr schlecht als recht, einen Workaround gibt.  
                
              cu,  
              ziegenmelker
              
              1. Hallo,

                Das ist ja schön, aber warum nicht bei der Iteration durch die Attibutes Collection?
                Diese ist ja gerade dazu da, auf Attribute zugreifen zu können, die auch existieren, sprich denen Werte zugewiesen wurde.

                attributes[index|key] macht in mehreren Browsern Probleme, der Hinweis "DO NOT USE" ist beachtenswert.

                MfG, Thomas

                1. Hallo,

                  attributes[index|key] macht in mehreren Browsern Probleme, der Hinweis "DO NOT USE" ist beachtenswert.

                  thx. Diese Webseite hatte ich vergessen zu durchforsten. ;-)

                  cu,
                  ziegenmelker

        2. Hallo,

          Es ging doch gar nicht um die "+="-Zeile, sondern um das erste Ansprechen von innerHTML beim neu erzeugten p-Elementknoten mit Wert "X: ". Offenbar ist bei aelteren Operas die innerHTML-Eigenschaft zu diesem Zeitpunkt noch nicht etabliert, was ich bei einem Elementknoten ohne Inhalt sogar nachvollziehbar finde (und letzlich mangels offiziellem Standard dem Browser ueberlassen bleibt).

          sieh dir das Code-Beispiel bitte nocheinmal an. Die innerHTML-Zuweisungen an das Div- sowie an das P-Element funktionieren ja wie erwartet.
          Beim Einhängen eines Input-Elements wird das Value-Attribut nicht (immer) mitübernommen, das wiederum funktioniert, wenn innerHTML noch _leer_ ist und die Text-Elemente durch obj.setAttribute(document.createTextNode(String)) erzeugt werden, wie du es vorgeschlagen hast.
          Wenn das P-Element mit seinen enthaltenen Knoten in das Div-Element eingehängt wird, existiert dort übrigens ja auch schon ein Text, der über innerHTML eingefügt wurde, und das funktioniert so. Eigentlich müsste das doch analog zu den Vorgängen im P-Element eventuell zu Fehlern kommen.

          cu,
          ziegenmelker

  2. Hi,

    Hat irgend jemand eine Vorstellung an was das liegen kann?

    Generelle Anmerkung: Die JS-Implementation der Opera-Programmierer ist, auch und gerade was DOM (egal welches) betrifft, massiv fehlerhaft sowie ohnehin unvollständig.

    Gruß, Cybaer

    --
    Hinweis an Fragesteller: Fremde haben ihre Freizeit geopfert, um Dir zu helfen. Helfe Du auch im Archiv Suchenden: Beende deinen Thread mit einem "Hat geholfen" oder "Hat nicht geholfen"!