Axel Richter: <button> + innerHTML ???

Beitrag lesen

Hallo,

in einer Webseite ist ein <button> Element vorhanden in der Form
<button id="btn" onclick="do()">caption</button>
Nachdem das onclick Event ausgelöst wurde wird u.a. die Caption des Buttons mittels
document.getElementById('btn').innerHTML = 'neuer Caption';
geändert.
Es wird in allen Browsern, die auf Mozilla aufsetzen (Mozilla selber, Phoenix, K-Meleon, Netscape ab 6.1) der Button so behandelt als ob er überhaupt keinen Caption hätte:

Das kann ich nicht bestätigen, wenn mit innerHTML nur Text gesetzt wird geht das schon. Da Buttons aber durchaus HTML beinhalten können, ist da ein Bug in den Mozillas. Mit eine Zuweisung auf innerHTML beim button-Element wird nur der erste Knoten geschrieben. IE hat dafür den bekannten Button-value-Bug ;-))

<html>
<head>
<title></title>
<script type="text/javascript">
<!--
function inhaltElemente() {
  //In Netscape 6.2.1 hat textarea _kein_ firstChild. Das ist, meiner Meinung nach, falsch.
  //Button hat Childs, sobald nur HTML-Knoten, zwischen den Tags stehen. Das ist korrekt, da button-Elemente HTML beinhalten.
  //Im IE5.5 geht das.
  try {
    var inhTArea = document.getElementById("ta").firstChild.nodeValue;
    alert(inhTArea);
  } catch(e) {
    alert(e);
  }
  try {
    var inhBtn = document.getElementById("btn").firstChild.nodeValue;
    alert(inhBtn);
  } catch(e) {
    alert(e);
  }

//In Netscape 6.2.1 haben textarea und button zwar innerHTML, beim textarea ist das aber leer, was richtig ist, weil ein textarea ja _kein_ HTML anzeigt.
  //Im IE5.5 haben beide innerHTML, bei beiden wird etwas zurückgegeben.
  try {
    var inhTArea = document.getElementById("ta").innerHTML;
    var inhBtn = document.getElementById("btn").innerHTML;
    alert(inhTArea);
    alert(inhBtn);
  } catch(e) {
    alert(e);
  }

//In Netscape 6.2.1 haben textarea und button zwar value, beim button ist das aber nicht der Text innerhalb der button-Tags, was ja richtig ist.
  //Im IE5.5 sind beide values die Texte innerhalb der Tags, was falsch ist.
  try {
    var inhTArea = document.getElementById("ta").value;
    var inhBtn = document.getElementById("btn").value;
    alert(inhTArea);
    alert(inhBtn);
  } catch(e) {
    alert(e);
  }

//Das funktioniert allerdings auch im IE
  document.getElementById("ta").value = "<p>Neuer Text</p>\n<p>Neuer Text</p>";

//Netscape 6.2.1 schreibt mit innerHTML nur den ersten Textknoten.
  //Das geht bis "Neuer Sch".
  document.getElementById("btn").innerHTML = "Neuer Sch<u>a</u>lter";
  //Das wird nichts.
  //document.getElementById("btn").innerHTML = "<b>Neuer Sch<u>a</u>lter</b>";
}
//-->
</script>
</head>
<body>
<textarea rows="5" cols="30" id="ta"><p>Test</p>&#13;&#10;<p>Text</p>&#13;&#10;<p>Text</p></textarea>
<button id="btn" value="Wert">Sch<u>a</u>lter</button>
<input type="button" name="" value="OK" onclick="inhaltElemente();">
</form>
</body>
</html>

viele Grüße

Axel