nicht angemeldet
Die nachfolgende Seite funktioniert im Firefox
(2.0.0.7) korrekt und im IE7 (7.0.5730.11) nur teilweise.
Beim Klick auf den "Text ändern"-Button wird die Textpassage im textBlock-div in eine textarea kopiert und der Button durch einen "Text übernehmen"-Button ausgetauscht.
Man kann den Text nun ändern und mit "Text übernehmen" in den textBlock zurückschreiben.
Im Firefox funktioniert das vollständig.
Im IE funktioniert nur der Klick auf den "Text ändern"-Button, dann wird der Text in die textarea kopiert und auch die Buttons geswitcht. Aber beim Klick auf den "Text-Übernehmen"-Button passiert einfach gar nichts!?
<html>
<head>
<script>
function writeText() {
var line;
line = document.getElementById("txt").value;
// "Save" Button wegnehmen:
var saveBtn = document.getElementById("Save");
var form = document.getElementById("f");
form.removeChild(saveBtn);
// textarea wegnehmen und Text stattdessen zeigen:
var textBlock = document.getElementById("textBlock");
var textarea = document.getElementById("txt");
textBlock.removeChild(textarea);
textBlock.appendChild(document.createTextNode(line));
// "Text ändern" Button anlegen und zeigen:
var btn = document.createElement("button");
var id = document.createAttribute("id");
id.nodeValue = "ChangeText";
btn.setAttributeNode(id);
var click = document.createAttribute("onclick");
click.nodeValue = "changeText()";
btn.setAttributeNode(click);
btn.appendChild(document.createTextNode("Text ändern"));
form.appendChild(btn);
}
function changeText() {
// textarea anlegen und statt Text anzeigen:
var txt = document.createElement("textarea");
var name = document.createAttribute("name");
var id = document.createAttribute("id");
var cols = document.createAttribute("cols");
var rows = document.createAttribute("rows");
name.nodeValue = "txt";
id.nodeValue = "txt";
cols.nodeValue = "50";
rows.nodeValue = "8";
txt.setAttributeNode(name);
txt.setAttributeNode(id);
txt.setAttributeNode(cols);
txt.setAttributeNode(rows);
txt.value = document.getElementById("textBlock").firstChild.nodeValue;
document.getElementById("textBlock").replaceChild(txt,document.getElementById("textBlock").firstChild);
// "Save" Button anlegen und zeigen:
var btn = document.createElement("button");
id = document.createAttribute("id");
id.nodeValue = "Save";
btn.setAttributeNode(id);
var click = document.createAttribute("onclick");
click.nodeValue = "writeText()";
btn.setAttributeNode(click);
btn.appendChild(document.createTextNode("Änderung übernehmen"));
document.getElementById("f").appendChild(btn);
// "Text ändern" Button wegnehmen
var changeBtn= document.getElementById("ChangeText");
var form = document.getElementById("f");
form.removeChild(changeBtn);
}
</script>
</head>
<body>
<div id="textBlock">Die ist etwas Test im textBlock.</div>
<form id="f" name="f" action="#">
<button id="ChangeText" onclick="changeText()">Text ändern</button>
</form>
</body>
</html>