nicht angemeldet
Button reagiert nicht auf onclick im IE
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>
-
Moin Moin!
// "Save" Button wegnehmen:
var saveBtn = document.getElementById("Save");
var form = document.getElementById("f");
form.removeChild(saveBtn);Das wird nur funktionieren, wenn der Button ein direktes Kind des Formulars ist.
saveBtn.parentNode.removeChild(saveBtn);
funktioniert auch, wenn das nicht der Fall ist.
// "Text ändern" Button anlegen und zeigen:
var btn = document.createElement("button");
var id = document.createAttribute("id");createAttribute() ist mit dem IE problematisch, steht schon in SelfHTML.
id.nodeValue = "ChangeText";
btn.setAttributeNode(id);btn["id"]="ChangeText";
oder
btn.id="ChangeText";
sollte immer funktionieren.
var click = document.createAttribute("onclick");
click.nodeValue = "changeText()";
btn.setAttributeNode(click);Prinzipiell hier nochmal, allerdings kannst Du die Funktionsreferenz direkt zuweisen:
btn["onclick"]=changeText; // keine Klammern!
oder
btn.onclick=changeText; // keine Klammern!
ggf. mußt Du changeText vor diese Funktion ziehen, damit Javascript die Funktion an dieser Stelle schon kennt.
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);Noch ein paar Mal das IE-Problem:
txt.name="txt";
txt.id="txt";
txt.cols=50;
txt.rows=8;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";Und wieder ...
btn.setAttributeNode(id);
var click = document.createAttribute("onclick");
click.nodeValue = "writeText()";
btn.setAttributeNode(click);Und wieder ...
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);Und hier nochmal das Parent-Spiel von ganz oben:
changeBtn.parentNode.removeChild(changeBtn);
}
Alexander
-
Funktioniert! Vielen Dank für die Hilfe!